Startseite Joomla Simple Picture Slideshow - Anleitung Plugin Code
2010-09-09
Simple Picture Slideshow Plugin Verwendung - Code
Geschrieben von: Andreas Berger   
Sonntag, den 12. Juli 2009 um 18:03 Uhr

Übersicht über die Möglichkeiten des Aufrufs direkt aus dem Artikel.

Das "Simple Picture Slideshow" Plugin wird aus dem jeweiligen Artikel aufgerufen. Dabei gibt es - neben der Wahl des Ordners, in dem die Bilder liegen - weitere Möglichkeiten, die Slideshow aufzuwerten oder zu gestalten.

 

A.) Die Slideshow selbst

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 Pfad zum Ordner, also "/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 von "/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.




B.) Parameter Overrides

Beginnend mit Version 1.3 bietet die "Simple Picture Slideshow" die Möglichkeit, alle im Konfigurationspanel des Plugins gesetzten Werte direkt im Aufruf zu überschreiben. Damit können verschiedenst gestaltete Slideshows erstellt werden.
Dazu wird der Aufruf des Plugins um die benötigten Parameter erweitert. Diese folgen dem Ordnernamen, von diesem und untereinander jeweils getrennt durch einen vertikalen Trennstrich und haben das Format PARAMETER=WERT:

Übersicht über die möglichen Parameter:

width - Breite der Slideshow in Pixel (ganze Zahl) z.B.: 400

height - Höhe der Slideshow in Pixel (ganze Zahl) z.B.: 300

align - Ausrichtung der Slideshow im Artikel; mögliche Werte: 0 (rechts), 1 (mitte), 2 (links), 3 (float left), 4 (float right)

bgcol - Hintergrundfarbe der Slideshow als hexadezimaler Wert (ohne einleitende Raute) z.B.: ffffff

sdur
- Zeit die die einzelnen Bilder angezeigt werden in Sekunden (ganze Zahl) z.B.: 3

fdur - Dauer des Überblendens zwischen zwei Bildern in Sekunden (ganze Zahl) z.B.: 1

steps - Anzahl der Schritte beim Überblenden als Wert von 1 - 100 (ganze Zahl) z.B.: 50

auto - automatisch Starten beim Laden der Seite; mögliche Werte: 0 (nein), 1 (ja)

sort - Sortierung der Bilder; mögliche Werte: 0 (A-Z - DEFAULT), 1 (Z-A), 2 (alt-neu), 3 (neu-alt), 4 (zufällig)

setid - Name des Ordner als Identity des obersten DIV-containers; mögliche Werte: 0 (nein), 1 (ja)

ctrls - Kontrollelemente anzeigen; mögliche Werte: 0 (nein), 1 (ja)

csort - Anordnung der Kontrollelemente; beliebige Kombination aus den mögliche Werten:
1 (Counter), 2 (Start), 3 (Stop), 4 (rückwärts), 5 (vorwärts), - (Trennung links rechts)
z.B.: 1-2345 (Erläuterungen siehe Plugin Howto)

cstart - Wert für das Kontrollelement "Start"; mögliche Werte: leer (Standardbutton); beliebiger Text; Dateiname eines Buttons (siehe Plugin Howto)

cstop - Wert für das Kontrollelement "Stop"; mögliche Werte: leer (Standardbutton); beliebiger Text; Dateiname eines Buttons (siehe Plugin Howto)

cfwd - Wert für das Kontrollelement "Vor"; mögliche Werte: leer (Standardbutton); beliebiger Text; Dateiname eines Buttons (siehe Plugin Howto)

cbwd - Wert für das Kontrollelement "Zurück"; mögliche Werte: leer (Standardbutton); beliebiger Text; Dateiname eines Buttons (siehe Plugin Howto)

prld - Bilder nachladen (ganze Zahl von 3 - "Bilder in der Slideshow") z.B.: 5; Erläuterung siehe Plugin Howto

caps - Captions anzeigen; mögliche Werte: 0 (nein), 1 (ja)

inout - Position der Captions; mögliche Werte: 0 (unter dem Hauptbild), 1 (überblendet über das Hauptbild)

links - Links anzeigen; mögliche Werte: 0 (nein), 1 (ja)


Beispiele:

{*besps}slideshow|width=600|height=450{/besps*} - ohne die Sterne
Ungeachtet der Voreinstellungen wird diese Slideshow mit einer Breite von 600 Pixel (width=600) und einer Höhe von 450 Pixel (height=450) angezeigt.

{*besps}slideshow|ctrls=0|caps=0|links=0|auto=1{/besps*} - ohne die Sterne
Keine Kontrollelemente, keine Captions, keine Links, die Sldieshow startet automatisch.

Hinweise:

Die Parameter entsprechen den Parametern im Konfigurationspanel des Plugins und sind auf der Seite Anleitung Plugin ausführlich erläutert.
Der erste Parameter innerhalb eines Aufrufs ist immer der Ordner mit den Bildern. Danach ist die Reihenfolge, in der die Overrides angegeben werden frei wählbar.


C.) Captions

Überschriften und Texte werden mit einem eigenen Aufruf angegeben. Dieser lautet:

{*besps_c}Slideshownummer|Bilddatei|Titel|Text{/besps_c*} - ohne die Sterne


Slideshownummer:
Die Slideshows innerhalb eines Beitrages werden von 0 beginnend durchnummeriert.
Diese Eingabe ist unbedingt erforderlich

Bilddatei:
Der Name der Datei "meinbild.jpg".
Wird hier nichts eingegeben, dann wird der Aufruf als Default-Wert für die Slideshow verwendet. Das bedeutet, er wird bei allen Bildern angezeigt, für die keine eigene Eingabe vorhanden ist. Dateiname und Suffix sind CaseInsensitiv.

Titel:
Die Überschrift. Wird hier nichts eingegeben . . . dann wird keine Überschrift angezeigt.

Text:
Der Text unterhalb der Überschrift. Wird hier nichts eingegeben . . . dann wird kein Text angezeigt.

Beispiele:

{*besps_c}0||meinTitel|meinText{/besps_c*} - ohne die Sterne
Dieser Aufruf legt für die erste Slideshow im Beitrag den Standardtitel "meinTitel" und den Stadardtext "meinText" fest, indem kein Bild angegeben wird. Hinweis: natürlich muss man keinen Stadardtext festlegen. Findet das Plugin für ein Bild keine Angabe, dann wird eben nichts angezeigt.

{*besps_c}1|bild01.png||meinText{/besps_c*} - ohne die Sterne
Bei bild01.png in der zweiten Slideshow im Beitrag wird keine Überschrift und als Text "meinText" angezeigt.

{*besps_c}0|bild02.png||{/besps_c*} - ohne die Sterne
Bei bild02.png in der ersten Slideshow im Beitrag wird nichts angezeigt (Auch nicht der weiter oben festgelegte Standardtext/-titel.)

{*besps_c}0|bilda.jpg|meinTitelA|meinTextA{/besps_c*} - ohne die Sterne
{*besps_c}0|bildb.jpg|meinTitelB|meinTextB{/besps_c*} - ohne die Sterne
{*besps_c}0|bildc.jpg|meinTitelC|meinTextC{/besps_c*} - ohne die Sterne
{*besps_c}0|bildd.jpg|meinTitelD|meinTextD{/besps_c*} - ohne die Sterne ... ich glaube, das Prinzip ist klar

Hinweise:
Wo im Beitrag und in welcher Reihenfolge diese Angaben gemacht werden ist ohne Belang.
Die Anzahl der Parameter in einem Aufruf muss immer 4 sein. Das bedeutet, es müssen immer 3 vertikale Trennstriche (broken vertikal bar) angegeben sein, auch wenn zum Beispiel kein Text angegeben wird, der Trennstrich nach dem Titel muss vorhanden sein!
Diese Trenner sind hier geschützte Zeichen und dürfen im Text der Eingaben nicht verwendet werden.
Sind Captions im Konfigurationspanel des Plugins deaktiviert, dann können sie trotzdem verwendet werden um mit dem Titel den (ansonsten automatisch eingefügten) Dateinamen als ALT- und TITLE-Tag zu ersetzen.


D.) Links

Möchten wir die Bilder der Slideshow verlinken, dann kommt zusätzlich noch eine dritte Form des Aufrufs zum Einsatz:

{*besps_l}Slideshownummer|Bilddatei|Verweisziel|Titel|target{/besps_l*} - ohne die Sterne


Slideshownummer:
Die Slideshows innerhalb eines Beitrages werden von 0 beginnend durchnummeriert.
Diese Eingabe ist unbedingt erforderlich

Bilddatei:
Der Name der Datei "meinbild.jpg".
Wird hier nichts eingegeben, dann wird der Aufruf als Default-Wert für die Slideshow verwendet. Das bedeutet, er wird für alle Bilder verwendet, für die keine eigene Eingabe vorhanden ist. . Dateiname und Suffix sind CaseInsensitiv.

Verweisziel:
Die URL zu der verlinkt werden soll. Z.B.: http://www.bretteleben.de

Titel:
Der Text, der beim Überfahren des Bildes für den Link angezeigt werden soll. z.B.: bretteleben.de

target:
Das Fenster, in dem das Verweisziel geöffnet werden soll. z.B.: _blank (neues Fenster), _self (selbes Fenster)

Beispiele:

{*besps_l}0||http://www.bretteleben.de|bretteleben.de|_blank{/besps_l*} - ohne die Sterne
Dieser Aufruf legt durch den leeren Bildnamen für die erste Slideshow im Beitrag den Standardlink www.bretteleben.de mit dem Text bretteleben.de fest, geöffnet wird der Link in einem neuen Fenster.

{*besps_l}1|bild01.png|http://www.disney.com|Disney|_self{/besps_l*} - ohne die Sterne
bild01.png in der zweiten Slideshow wird mit www.disney.com verlinkt, der Link öffnet im selben Fenster.

{*besps_l}0|bild02.png|||{/besps_l*} - ohne die Sterne
bild02.png in der ersten Slideshow im Beitrag soll nicht verlinkt werden. Ein Sonderfall, denn wenn man Links aktiviert hat, dann werden alle Bilder der Slideshow verlinkt. bild02.png wird in diesem Fall einen leeren Verweis haben und auf die selbe Seite verlinken.

{*besps_l}0|bilda.jpg|http://www.meine.domain.com/meinTollesProdukt1|tollesProdukt1|_self{/besps_l*} - ohne die Sterne
{*besps_l}0|bildb.jpg|http://www.meine.domain.com/meinTollesProdukt2|tollesProdukt2|_self{/besps_l*} - ohne die Sterne
{*besps_l}0|bildc.jpg|http://www.meine.domain.com/meinTollesProdukt3|tollesProdukt3|_self{/besps_l*} - ohne die Sterne
{*besps_l}0|bildd.jpg|http://www.meine.domain.com/meinTollesProdukt4|tollesProdukt4|_self{/besps_l*} - ohne die Sterne ... usw.

Hinweise:
Wo im Beitrag und in welcher Reihenfolge diese Angaben gemacht werden ist ohne Belang.
Die Anzahl der Parameter in einem Aufruf muss immer 5 sein. Das bedeutet, es müssen immer 4 vertikale Trennstriche (broken vertikal bar) angegeben sein, auch wenn eine Angabe (zum Beispiel der Name der Bilddatei) leer bleibt!
Diese Trenner sind hier geschützte Zeichen und dürfen im Text der Eingaben nicht verwendet werden.

 


Das wars! Viel Spass mit dem Plugin!


Für Fragen und Anregungen steht die Kommentarfunktion zur Verfügung.

Wer die Erweiterung nutzt den bitte ich, sie auf extensions.joomla.org zu bewerten und einen Erfahrungsbericht zu posten. Darüber hinaus freue ich mich über jeden, der die Möglichkeit findet, mich durch einen Link zu www.bretteleben.de auf seiner Webseite zu unterstützen. Das Plugin selbst produziert keine versteckten Links oder sonstige Nettigkeiten welcher Art auch immer.

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ü).

 

Zuletzt aktualisiert am Montag, den 12. April 2010 um 21:27 Uhr
 
Kommentare (133)
Links not working
43 Montag, den 26. Oktober 2009 um 13:23 Uhr
Tony
Hello Andreas,
Even if I remove the folder name and give only the file name it is still showing me only the code on the website and not the images with the link. Please help.

Thanks,
Tony
jBookmarks
42 Samstag, den 24. Oktober 2009 um 14:31 Uhr
Martin Heinz
BINGO!!!

Das Modul jbookmarks zeigt Links zu social Bookmarks. Ich hatte das völlig übersehen.

VIELEN DANK und viele Grüsse

Martin
@Martin Heinz
41 Samstag, den 24. Oktober 2009 um 13:25 Uhr
A. Berger
Hallo Martin Heinz!

Du hast recht - mein Fehler - das Script ist nicht im HEAD der Seite sondern kommt offensichtlich mit dem Modul jbookmarks. :)

Gruß
Andreas
Störung der Slideshow durch Skript im Header
40 Samstag, den 24. Oktober 2009 um 13:00 Uhr
Martin Heinz
Hallo Andreas,

vielen Dank für den Tipp. Leider kann ich dieses Skript nirgends finden. Hast Du einen Tipp für mich, wo ich es suchen muss? Meine Firebug-Erweiterung des Browsers zeigt zwar Skripte im Header an, jedoch finde ich dort nirgends die windows.onload-Funktion. Und im Template waren keine Skripte dabei.

Danke!

Martin
@Martin Heinz
39 Samstag, den 24. Oktober 2009 um 11:03 Uhr
A. Berger
Hallo Martin Heinz!

Das De-/Installieren und Verschieben meiner beiden Plugins kann nichts bringen, denn die beiden stören sich gegenseitig nicht.
Was die Slideshow killt, das ist ein Script im Head der Seite:

window.onload=function(){var imgs = []; $$('#jbmwrap img.jbm').each(function(img){if (img.getAttribute('title')) imgs.push(img);});new MooTips(imgs, {maxOpacity: 0.8, maxTitleChars: 25});};

Dabei wird der JavaScript onload-Event gnadenlos überschrieben, ohne sich darum zu scheren, ob vielleicht andere Scripts (im konkreten Fall die Slideshow) dem Event bereits Funktionen zugeordnet haben.

Bitte informiere den/die Entwickler der Erweiterung, zu der das Script gehört, per Email oder Supportforum, dass das Script in dieser Hinsicht Probleme verursacht. Vielleicht wird das gefixt.

Bis dahin könntest Du das Script umschreiben wie folgt:

slideshowkiller=function(){var imgs = []; $$('#jbmwrap img.jbm').each(function(img){if (img.getAttribute('title')) imgs.push(img);});new MooTips(imgs, {maxOpacity: 0.8, maxTitleChars: 25});};

if(window.onload){var ld=window.onload;window.onload=function(){ld();slideshowkiller();};}
else{window.onload=slideshowkiller;}

Gruß
Andreas
Simple Picture Slideshow - Arbeitet nicht zusammen mit Very simple Image Gallery
38 Samstag, den 24. Oktober 2009 um 10:39 Uhr
Martin Heinz
Hallo Andreas,

es ist verrückt: Ich habe die Simple Picture Slideshow eingebaut, und sie funktionierte großartig. Dann habe ich in einen zweiten Artikel die Very Simple Image Gallery eingebaut, die auch großartig funktioniert.
Aber seitdem funktioniert die Simple Picture Slideshow nicht mehr (Das erste Bild und die Buttons werden angezeigt, aber es wird kein weiteres Bild mehr geladen, weder manuell noch automatisch).
Alle Versuche, die Plugins an den Anfang oder das Ende zu schieben oder sie zu deinstallieren und neu zu installieren haben keinen Effekt gebracht.
Hier der Link auf die Site:
http://www.celestine-prophezeiungen.de/celestine2/angelasengel.html

Template: Eine grafisch modifizierte Version von themza_j15.01; Joomla 1.5.14; Browser Firefox (aktuelleste Version).

Im Voraus vielen Dank!
@Tony
37 Freitag, den 23. Oktober 2009 um 20:21 Uhr
A. Berger
Hi Tony!

Please use the image file name without the path:

{besps_l}0|TCC Logo.jpg|||{/besps_l}

instead of:

{besps_l}0|verysimple/TCC Logo.jpg|||{/besps_l}

Best regards
Andreas
@Chris
36 Freitag, den 23. Oktober 2009 um 20:16 Uhr
A. Berger
Hi Chris!

If the slideshow does not start, try to switch the template temporarily (beez for example comes with a JavaScript that causes the slideshow to fail and has to be patched). If the template is not the reason, try to - again temporarily - deactivate other extensions you have installed to see if there is a conflict.
In addition - and if possible - you could provide a link to your page and I will have a look at it.

Best regards
Andreas
Links not working
35 Freitag, den 23. Oktober 2009 um 10:00 Uhr
Tony
Hi,
I am trying to use the code to active images as links int he plugin and display it on the page. If I use the basis one it works fine, but if i add code something like this

{besps_l}0|verysimple/TCC Logo.jpg|||{/besps_l} {besps_l}0|verysimple/Church Building.jpg|||{/besps_l} {besps_l}0|verysimple/Altar.jpg|||{/besps_l} {besps_l}0|verysimple/Main Hall.jpg|||{/besps_l} {besps_l}0|verysimple/Banner.jpg|http://www.thechristiancentre.com/tcc/new-to-tcc/services.html|Services|_blank{/besps_l}

It just displays the code on the website and doesn't show the slideshow at all. Can you please help.

Thanks,
Tony
besps.js throws Javascript error
34 Donnerstag, den 22. Oktober 2009 um 06:03 Uhr
Chris
Hello,

I dont know whats going on, but after I installed the plugin in Joomla (1.5.14) and put it in an article, the page shows only one picture, no slide effect... When I put in the controls and click on Start then a JS error "pnext is not defined" comes up (using a debugger)... This is a variable defined in besps.js - did anyone had this problem also and how to solve it ?
This error comes up in FF 3.5 and IE 7 as well.

Thanks a lot ! Chris