Startseite Joomla Simple Picture Slideshow - Anleitung Plugin Code
2010-09-07
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 (130)
@kapunkt
70 Samstag, den 05. Dezember 2009 um 14:05 Uhr
A. Berger
Hallo kapunkt!

Wenn Du schreibst "plötzlich", dann nehme ich an, dass diesem "plötzlich" irgendeine Änderung vorangegangen ist. Hast Du das Plugin aktualisiert? Hast Du eine andere Erweiterung zusätzlich installiert oder das Template gewechselt? Wenn ja, dann liegt vermutlich dort die Antwort.

In jedem Fall lade ich Dich ein, einen Link zur Seite zu posten, ich schaue mir das gerne an.

Gruß
Andreas
Simple Picture Slideshow - link always opens in a new window
69 Freitag, den 04. Dezember 2009 um 14:50 Uhr
Vassil
Hi,
Your work i awesome. Thank you for doing it.
I have trouble making the Simple Picture Slideshow link to open in the same widow. Here is my code in the article:

{besps}frontpage_slideshow{/besps}

{besps_l}0||http://sale.em.com/index.php?option=com_virtuemart&Itemid=53|SALE|_self{/besps_l}

I will greatly appreciate your comments.
The slideshow is set on auto and there are no controls visible to the user.
Thanks.
Buttons funktionieren nicht mehr!
68 Freitag, den 04. Dezember 2009 um 10:58 Uhr
kapunkt
Der Buttons der Slideshow funktionieren plötzlich nicht mehr. Beim Anklicken erfolgt keine Aktion! Woran kann das liegen?
Thanks
67 Donnerstag, den 03. Dezember 2009 um 15:30 Uhr
Ric
Hi Andreas

Thanks for the help.Your explanation was just perfect. I didn't get that from the 'How to plugin code' page. I think it could be made a little clearer just by saying in the sections about using Captions and links that the {} includes are in addition to the defining one at the begining.

Other than that it works just great and I have tried the 'VSIG' and applied the same idea for caption. Yep its good too.

Regards

Ric
@Michel Weinfeld
66 Mittwoch, den 02. Dezember 2009 um 21:04 Uhr
A. Berger
Hi Michel!

The stylesheet of the plugin is installed at /plugins/content/plugin_besps/besps.css
Open it with a text editor and change the selector .besps_holder {} to

.besps_holder {margin:0 !important!;}

This overrides the set (by the plugin on the fly) margin of 10px.

Best regards
Andreas
Image margins
65 Mittwoch, den 02. Dezember 2009 um 18:04 Uhr
Michel Weinfeld
Hi.

I find your extension very useful and it works fine. However, it seems that the pictures have a margin (see the site http://agir78470.fr). How would it possible to set this margin to zero ?

Regards.

Michel
@Ric
64 Montag, den 30. November 2009 um 18:11 Uhr
A. Berger
Hi Ric!

At first, please make sure, you are using the code for captions in addition and not instead of the initial call:

{besps}slideshow_1{/besps}

Next, the call for links and captions has as second parameter the image file name only, no path:

{besps_c}0|church_in_1914.jpg|Building the church in 1914|{/besps_c}

Third, please check the image file name PLUS suffix for typos and correct upper/lowercase.

And last but not least, in your article switch to HTML-view and check if the code is fragmented by any HTML-tags (format, paragraph, etc.)

If the problem persists, please provide a link to the page PLUS the full code you are using in your article. I will have a look at it.

Best regards
Andreas
besps_c problem
63 Montag, den 30. November 2009 um 14:22 Uhr
Ric
Hi

using joomla 1.5.9 and the besps works ok however when I add the follwing

{besps_c}0|slideshow_1/church_in_1914.jpg|Building the church in 1914|{/besps_c}

it displays as

{besps_c}0|slideshow_1/church_in_1914.jpg|Building the church in 1914|{/besps_c} on the site
excellent
62 Dienstag, den 17. November 2009 um 14:27 Uhr
liam Donaghy
hi Andreas,

simple and works, got it going in 3 mins, excellent work, keep up the good work

liam
@bruijnea
61 Mittwoch, den 11. November 2009 um 23:39 Uhr
A. Berger
Hi bruijnea!

The problem is still the same. Have a look at the source of your page. The script, the slideshow uses is linked with the following link:

http://www.bruijnesjes.nl/plugins/content/plugin_besps/besps.js

Copy this link to the adressbar of your browser and try to open the file. You will get an Error 403, Access forbidden!

As long as this happens, the slideshow will not work - because it is not present for your visitor. The settings on your server locked the file and no browser is able to load it.

Best regards
Andreas