Simple Picture Slideshow Plugin Installation und Verwendung
Geschrieben von: Andreas Berger   
Donnerstag, den 08. Januar 2009 um 17:34 Uhr

Eine Schritt für Schritt Anleitung für Installation und Verwendung des bretteleben.de Simple Picture Slideshow Plugins.

Installation

1.) In die Administrationsoberfläche einloggen


2.) Den Menüpunkt "Erweiterungen" > "Installieren/Deinstallieren" auswählen


3.) Die Paketdatei mit dem bretteleben.de Simple Picture Slideshow Plugin auswählen


4.) Auf "Hochladen und Installieren" klicken


5.) Wenn alles geklappt hat, erhält man die Meldung "Plugin erfolgreich installiert"


6.) Den Menüpunkt "Erweiterungen" > "Plugins" auswählen


7.) Das "bretteleben.de Simple Picture Slideshow" suchen und anklicken


8.) Der erste Abschnitt betrifft die Darstellung der Slideshow auf der Seite.
Der erste konfigurierbare Parameter ist die Breite der Slideshow in Pixel.


9.) Als nächstes kommt die Höhe der Slideshow.



Bilder die größer sind, als hier angegeben, werden entsprechend den Vorgaben im Browser skaliert. Kleinere Bilder werden nicht vergrössert. Soweit möglich sollte man die Bilder in dem Format hochladen, in dem sie dann auch auf der Seite dargestellt werden, da ein Skalieren durch den Browser Qualitätsverluste mit sich bringt und unnötig große Bilder die Ladezeit der Seite verlängern ohne dem Besucher einen entsprechenden Mehrwert zu bieten.


10.) Der nächste Parameter legt die Positionierung der Galerie relativ zum verfügbaren Platz fest. Zur Auswahl stehen Links, Zentriert, Rechts, float left und float right. Die beiden letzten Optionen ermöglichen es, die Galerie mit Text umfliessen zu lassen. Sie machen die Galerie gleichzeitig aber auch wesentlich abhängiger vom verwendeten Template und werden wohl nicht immer den gewünschten Effekt haben.


11.) Background Color: Die Hintergrundfarbe der Slideshow ist dann von Bedeutung, wenn verschieden große Bilder verwendet werden und verhindert, dass das nächste Bild unter dem aktuellen Bild zu sehen ist. Gesetzt wird der hexadezimale Farbwert ohne vorangestellte Raute (#), also z.B. ffffff für weiß.


12.) "Sort Order" regelt die Reihenfolge, in der die Bilder angezeigt werden. Zur Auswahl stehen die Optionen alphabetisch aufsteigen, alphabetisch absteigend, von alt zu neu und von neu zu alt (jeweils Änderungsdatum und nicht Erstellungsdatum!) und zufällig.


13.) Der nächste Abschnitt regelt die Animation.
"Time to show" ist dabei die Zeit, die jedes Bild zwischen zwei Übergängen gezeigt wird in Sekunden.


14.) "Duration of Fading" ist die Dauer, die für den Übergang selbst vorgesehen ist, wieder in Sekunden. In den meisten Fällen wird hier 1 in Ordnung sein.


15.) Das Plugin verschiebt die Transparenz von 100% zu 0% (bzw. umgekehrt). "Fading steps" gibt die Schrittweite an. 5 bedeutet, dass die Transparenz in 5 Schritten um je 20% verringert wird. Bei 50 sind es 50 Schritte mit je 2%. Je höher der Wert, dest flüssiger - aber auch rechenintensiver das Überblenden. Ein zu hoher Wert führt bei großen Bildern dazu, dass die Zeitvorgabe überschritten wird. Einfach ausprobieren.


16.) Der nächste Parameter legt fest, ob die Slideshow mit dem Laden der Seite automatisch starten soll.


Diese Option kann auch dann gewählt werden, wenn man Links/Buttons anzeigt. Auf die Funktion hat das keinen Einfluss.


17.) Der nächste Abschnitt betrifft die optionalen Links/buttons zur Steuerung der Slideshow.
Der erste Parameter legt fest, ob diese überhaupt verwendet werden sollen.


18.) Der zweite Parameter regelt, welche Elemente angezeigt werden, ob sie links oder rechts angeordnet sind und in welcher Reihenfolge.


Das alles geschieht über die Eingabe einer Kombination aus den Werten 1, 2, 3, 4, 5 und dem Minuszeichen.

1 ... der Counter
2 ... Link/Button Start
3 ... Link/Button Stop
4 ... Link/Button Zurück
5 ... Link/Button Vor
'-' ... das Minuszeichen teilt die Elemente in links und rechts. Wird es weggelassen, erscheinen alle Elemente rechts.

Beispiele:
1-2345 . . . . links der Counter, rechts die vier Buttons/Links.
415 . . . . der Button/Link zurück, dann der Counter, dann der Button/Link vorwärts, alle rechts (kein Minus enthalten)
415- . . . . nochmals die selben Elemente, diesmal aber links


19.) Die nächsten 4 Parameter legen fest, was für die Links angezeigt werden soll.



- Lässt man die Eingabefelder leer, dann werden die automatisch installierten Standardbuttons angezeigt.

- Gibt man Text ein, dann wird dieser verwendet.

- Statt Textlinks können auch Bilder verwenden werden. Dazu gibt man den Namen des jeweiligen Bildes inklusive Dateiendung ein. Das Plugin erkennt die Eingabe .jpg, .gif und .png und sucht im eingestellten Ordner (Parameter weiter unten, per default: /images/stories/besps_buttons) nach Bildern dieses Namens. Sind sie vorhanden, dann werden sie angezeigt.


20.) Aktiviert man die Option "Show Captions", dann hat man die Möglichkeit, im Beitrag die Bilder einer Slideshow mit Titel und Text zu versehen.


Auch bei deaktivierter Option wird der Titel von Captions für den ALT- TITLE- TAG der Bilder verwendet und kann genutzt werden um hier den Dateinamen zu ersetzen.


21.) "Position of Captions" legt fest, ob Titel und Text halbtransparent über das Bild eingeblendet oder unter dem Bild angezeigt werden sollen.


22.) Mit der Aktivierung von "Use links?" hat man zusätzlich die Möglichkeit, die Bilder der Slideshow zu verlinken. Link, Titel und Ziel (Attribut target) werden im Artikel angegeben.


23.) Image root legt den Stammordner fest, in dem (direkt oder in Unterordnern) alle Bilder liegen. Standardmässig ist hier der Ordner /images/stories/ eingestellt (und dieser Ordner wird auch verwendet, wenn das Feld leer ist). In den meisten Fällen ist hier keine Änderung erforderlich, nur wer seine Bilder in einer Ordnerstruktur außerhalb von /images/stories/ organisiert hat, der kann hier den entsprechenden Pfad angeben.
Der hier festgelegte Pfad wird vom Plugin bei jedem Aufruf einer Galerie automatisch ergänzt und darf im Code im Artikel nicht mehr wiederholt werden!


24.) Buttonfolder
Wer für die Verwendung von Sets eigene Buttons erstellt hat, kann diese hier festlegen, in welchem Ordner das Plugin diese suchen soll. Per default ist der Ordner /images/stories/besps_buttons/ (wird nicht automatisch erstellt) eingestellt. In diesem sucht das Plugin auch, wenn dieses Feld leer ist.


25.) Stylesheet

Wer das Stylesheet besps.css verändert oder ein komplett eigenes Stylesheet verwenden möchte, der kann es im Ordner des Plugins (/plugins/content/plugin_besps) ablegen und danach hier auswählen.
Das hat den Vorteil, dass ein unter einem anderen Namen abgespeichertes Stylesheet auch bei einem Update unverändert erhalten bleibt, während das Default-Stylesheet besps.css beim Update überschrieben wird.


26.) JavaScript

Wer das JavaScript besps.js verändert oder ein komplett eigenes JavaScript verwenden möchte, der kann es im Ordner des Plugins (/plugins/content/plugin_besps) ablegen und danach hier auswählen.
Das hat den Vorteil, dass ein unter einem anderen Namen abgespeichertes JavaScript auch bei einem Update unverändert erhalten bleibt, während das Default-JavaScript besps.js beim Update überschrieben wird.


27.) Preload

Der nächste Parameter bietet die Möglichkeit, den Seitenaufbau zu beschleunigen, indem man für einen Teil der Bilder der Slideshow in einem ersten Schritt nur ein sehr kleines Platzhalter-Bild lädt. Dieses "besps.png" wird mit dem Plugin im Ordner /plugins/content/plugin_besps automatisch installiert. Nach dem Laden der Seite ersetzt das Script dieses Platzhalterbild mit den tatsächlichen Bildern.

In der Grundeinstellung werden alle Bilder statisch mit der Seite geladen. Gibt man hier eine Zahl größer 3 (soviele Bilder werden immer mindestens statisch geladen) ein, dann wird damit für die restlichen Bilder der Slideshow das Nachladen per Script aktiviert.

Beispiele:
10 Bilder liegen im Ordner, keine Eingabe, alle werden statisch geladen.
10 Bilder liegen im Ordner, Eingabe 3, 3 Bilder werden statisch, 7 per Script geladen
10 Bilder liegen im Ordner, Eingabe 5, 5 Bilder werden statisch, 5 per Script geladen usw.

Das Feature ist experimentell, das Script überprüft vor dem Aufruf eines Bildes derzeit noch nicht, ob es ein tatsächliches Bild oder ein Platzhalterbild aufruft. Wer den Parameter verwendet, sollte das Ergebnis ausgiebig testen. Rückmeldungen sind hochwillkommen!


28.) Der Parameter "Foldername as ID" bietet die Möglichkeit, den einzelnen Slideshows den Namen des Ordners, aus dem die Bilder stammen als Identity des umschließenden DIV-Containers zuzuweisen (id="ordnername").



Das Plugin beinhaltet im Ordner (Joomla-Installation)/plugins/content/plugin_besps das Stylesheet besps.css. Dieses wird nach den Styleangaben geladen, die das Plugin in den Head-Bereich der Seite schreibt, und ermöglicht es, jede Angabe manuell zu überschreiben. Das ist immer möglich, eine hier getroffene Angabe bezieht sich auf alle Simple Picture Slideshows eines Internetauftritts.
Mit der Zuweisung einer eindeutigen Identity hat man nun aber zusätzlich die Möglichkeit, jede einzelne Slideshow individuell zu gestalten, indem man die Identity als übergeordneten CSS-Selektor verwendet und nach den allgemeinen Angaben einzelne Slideshows gesondert gestaltet.


29.) Das Plugin aktivieren


30.) Auf Speichern klicken - und fertig




Verwendung

Damit man mit dem Plugin etwas anfangen kann, brauchen wir als Nächstes die entsprechenden Bilder. Diese legen wir in einem Ordner unter (Joomla-Installation)/images/stories ab.

1.) Den Menüpunkt "Site" > "Medien" auswählen


2.) Hier in den Ordner "Media" > "stories" wechseln


3.) Einen neuen Unterordner für die Bilder anlegen. Im Beispiel wähle ich dafür den Namen "simpleslideshow"


4.) In den neu angelegten Ordner wechseln.


5.) Und hier die Bilder hochladen. Das Plugin akzeptiert die Dateitypen ".jpg", ".gif" und ".png".


6.) Optional: Sollen unterhalb der Slideshow eigene grafische Buttons angezeigt werden, dann müssen wir uns auch um diese kümmern. Dazu wechseln wir nochmals in den Ordner "stories".

 

Und erstellen hier den Ordner besps_buttons. In diesem Ordner sucht das Plugins nach den Bildern, die wir unter Punkt 19 (Installation) angegeben haben.

Also laden wir sie hier auch hoch.

Hinweis: Das Plugin erzeugt diesen Ordner NICHT automatisch.


7.) Jetzt im Menüpunkt "Inhalt" > "Beiträge" den gewünschten Beitrag öffnen.


8.) An der gewünschten Stelle den Code zum Aufruf des Plugins eingeben.


Der Code besteht aus dem Aufruf selbst {*besps}{/besps*} (ohne die Sterne) und enthält den Namen des Ordners, in dem wir gerade die Bilder abgelegt haben. Der im Backend festgelegte Pfad zum Ordner, also per Default "/images/stories/" wird vom Plugin automatisch ergänzt und ist nicht mit anzugeben.


Ein Aufruf sieht also zum Beispiel so aus

{*besps}simpleslideshow{/besps*} - ohne die Sterne


Um einen Ordner in einem Unterordner zu verwenden, wird sinngemäß der Pfad unterhalb des im Backend festgelegten Pfades (per Default "/images/stories/") angegeben, also zum Beispiel für den Ordner "/images/stories/ordner/unterordner":

{*besps}ordner/unterordner{/besps*} - ohne die Sterne

An sich war es das und die Slideshow ist einsatzfertig.

Will man zusätzlich zu den Bildern auch Text anzeigen, die Bilder verlinken oder für die aktuelle Slideshow die im Backend eingestellten Werte überschreiben, dann geht es im zweiten Teil der Anleitung (Link am Ende der Seite) weiter.


9.) Speichern - Fertig!


Übersicht über die Möglichkeiten des Aufrufs direkt aus dem Artikel: Anleitung Plugin Code




Für Fragen und Anregungen steht die Kommentarfunktion zur Verfügung. Bitte geben Sie bei Ihrer Frage die verwendete Joomla! Version an und posten Sie bei Problemen - soweit möglich - einen Link zur betroffenen Seite.

Wer für sein Projekt zusätzliche Funktionen oder Adaptierungen über die Möglichkeiten des hier gebotenen Supports benötigt, der ist eingeladen, mich mit einer Beschreibung der gewünschten Leistungen und dem angedachten Budget per Email zu kontaktieren (Menüpunkt "Kontakt" im Topmenü).

Wer die Erweiterung nutzt den bitte ich, sie auf extensions.joomla.org zu bewerten und einen Erfahrungsbericht zu posten.

Zuletzt aktualisiert am Mittwoch, den 12. Januar 2011 um 15:06 Uhr
 
Kommentare (41)
ich kriegs nich hin :-(
41 Sonntag, den 06. Mai 2012 um 16:59 Uhr
Michi

Hallo,

vielen Dank für die ausführliche Anleitung. Endlich mal jemand, der eine Anleitung mitliefert.
Aber leider kriege ich es dennnoch nicht hin. Ich weiß nicht, was ich falsch mache!
Hier ist ein Link zu der Seite, wo ich versuche, die Anwendung anzuwenden!
www.gerauer-kreativbox.de/index.php/glanzinderhuette.html

Vielen Dank für die Hilfe,
Michi

@Michi
Sonntag, den 06. Mai 2012 um 20:24 Uhr
A. Berger

Hallo Michi!

Ist das Plugin aktiviert?

Gruß
Andreas

Using in module position
40 Sonntag, den 06. Mai 2012 um 15:49 Uhr
Ayla

Hello,

I am new to Joomla and have installed the slideshow and it works perfect and very easy to configure! Now I'm trying to put the slideshow in the header using the “Plugin in module” module that you suggest.

My question is, in this module I have to put "Adittional parameters", giving as an example:
if the plugin sting is of the type: {yootooltip title = [Tooltip Link] width = [250] mode = [cursor]} Tooltip Content {/ yootooltip} then:

1. Select in "type of plugin" the option {plugin} CODE {/ plugin};
2. Write in "Plugin to execute": yootooltip;
3. Write in "Additional Parameter": title = [Tooltip Link] width = [250] mode = [cursor], (or leave it blank in other case)
4. Write in "Command to insert": Tooltip Content;
5. Select custom dimensions if you want;
6 to 7. Set The size of the module (without "px").

Which parameters should be put for Simple Picture Slideshow?
Thank you!

@Ayla
Sonntag, den 06. Mai 2012 um 20:34 Uhr
A. Berger

Hi Ayla!

You don't need to use additional parameters. Replace "plugin" with "besps" and "Command to insert" with your folder and you're done.

Best regards
Andreas

How Do I make it the Header slider In the front Page
39 Donnerstag, den 03. Mai 2012 um 14:34 Uhr
Geoffrey Ontiri

Hello

I like the way they termed it that truly reflects it real simplicity, I enjoyed working with it but now How Do I make it the header slider on the FrontPage slider,

Thank you

@Geoffrey Ontiri
Donnerstag, den 03. Mai 2012 um 22:03 Uhr
A. Berger

Hi Geoffrey!

If you want to integrate a slideshow in your template directly, you could use the JavaScript Slideshow (find it in the section "JavaScript" in the menu at the left).
If there is a module position, you want to display the "Simple Picture Slideshow", please pay attention to the fact, that not every custom content module allows to use content plugins. You could give "Article Module" from Digihaven or a similar extension a try.
If there is no module position that fits your needs, you can add an additional module position yourself. Just run a search for "joomla! custom module position" at your favorite search engine, there's a lot of articles on this topic.

Best regards
Andreas

Slide delay
38 Freitag, den 27. April 2012 um 07:41 Uhr
XB

Hi,

How to change slide delay?

@XB
Dienstag, den 01. Mai 2012 um 15:51 Uhr
A. Berger

Hi XB!

Use the parameter "Time to show (sec.)".

Best regards
Andreas

Stories folder
37 Donnerstag, den 26. April 2012 um 08:57 Uhr
Lloyd

Hello, I have no stories folder in my media folder (2.) Navigate to the folder "Media" > "stories") please help.

Thanks
Lloyd

@Lloyd
Donnerstag, den 26. April 2012 um 20:38 Uhr
A. Berger

Hi Lloyd!

The default image root was /images/stories/ in Joomla!1.5 and is /images/ in Joomla!1.6/1.7/2.5. The plugin comes with this default image folder set as the default value for the parameter "Image root".
Therefore, if you are using Joomla!2.5, just create your folder for the slideshow directly in the main media folder (which is the folder /images/ in your Joomla! root directory).

Best regards
Andreas

Presentación de Imagenes
36 Montag, den 23. April 2012 um 16:12 Uhr
Edgar Villca

Hola amigos

Este tutorial es excelente, me han ayudado en presentar mis imagennes en mi pagina web, gracias amigos por la ayuda, espero que sigan adelante con mas ayuda

muchas gracias

use it in logo header part
35 Sonntag, den 22. April 2012 um 13:26 Uhr
sanal

how it use in logo header part
{*besps}simpleslideshow{/besps*} :not work in that part, in article its ok.

@sanal
Sonntag, den 22. April 2012 um 14:33 Uhr
A. Berger

Hi sanal!

If you want to integrate a slideshow in your template directly, you could use the JavaScript Slideshow (find it in the section "JavaScript" in the menu at the left).
If there is a module position, you want to display the slideshow, please pay attention to the fact, that not every custom module allows to use content plugins. You could give "Article Module" from Digihaven or a similar extension a try.

Best regards
Andreas

simple slideshow
34 Samstag, den 31. März 2012 um 19:24 Uhr
Kirby

Thank you.

Just like everyone said, simple to install and very simple to use.

love it- sooo simple to use
33 Dienstag, den 20. März 2012 um 23:37 Uhr
Connie Hatch

Wow, I wish all the plugins were this simple to install and use. I am very new to Joomla and this seriously took about 2 minutes to get the slideshow onto my website!

Simple SlideShow
32 Freitag, den 06. Januar 2012 um 23:26 Uhr
Silvano

Perfect Slideshow !!!!! I'm very happy whit it.

The only thing is, that I don't know how/where to "deactivate" so that the filename of the pictures does not appear by  see e.g. mouse over.
Where can I set the mouse behavior.
many thanks for a quick hint.

kind regards
Silvano

Mouseover behavior
Sonntag, den 05. Februar 2012 um 19:14 Uhr
Silvano

Lieber Andreas... sehe erst jetzt dass Du geantwortet hast.
Will Dir dafür sehr danken !!!

freundliche Grüsse
Silvano

@Silvano
Mittwoch, den 11. Januar 2012 um 16:04 Uhr
A. Berger

Hi Silvano!

Up till now there is no backend setting to achieve this, but you can add an empty default caption. This solves the problem.

{*besps}folder{/besps*}
{*besps_c}0|||{/besps_c*} ... without the asterisks

Best regards
Andreas

Deutsch
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Wer ist online
Wir haben 153 Gäste online