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.