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)
I need a text over image
110 Freitag, den 30. April 2010 um 14:23 Uhr
nirav m gandhi

Hi Everybody

This is the best plugin i have ever seen still today but now i m just little bit go on wrong path
I can see the img and text both but the text is coming the below the img but i need it is over just like your first demo
my site url is http://myrecordboard.com/index.php
I need a text over the image just like your first demo can it is possible If yes then pls explain me.

@nirav m gandhi
Sonntag, den 02. Mai 2010 um 20:48 Uhr
A. Berger

Hi nirav m gandhi!

I just visited the site and noticed that you already found out how to use the setting "Position of Captions".

Best regards
Andreas

why aren't captions showing up?
109 Dienstag, den 20. April 2010 um 21:43 Uhr
chris

I used the following code, and the first caption shows up, but then the 2nd and 3rd do not..

{*besps}disc_golf/courses|width=260|height=160|align=4|ctrls=0|caps=1|inout=0{/besps}
{*besps_c}0|course1.jpg|| Carved out of woods like an old pioneer trial, the curse at Middle Creek is still a little rough around the edges{/besps_c}
{*besps_c}0|course2.jpg||East Wake School: With a course this open and simple, it's best to show up late to avoid hitting the only real obstruction: young students{/besps_c}
{*besps_c}0|course3.jpg||The rules state that if a disc is completely submerged then an extra stroke is charged. Be ready to add some strokes when you take on the hazards at Buckhorn{/besps_c}

captions
Freitag, den 23. April 2010 um 21:19 Uhr
Chris

perfect!  Thanks!

@Chris
Donnerstag, den 22. April 2010 um 21:39 Uhr
A. Berger

Hi Chris!

The text you are trying to show is fragmented with partial HTML-tags you created using a WYSIWYG-editor. This causes the failure. Open the article, switch to HTML-view and remove this partial tags.

Best regards
Andreas

captions
Donnerstag, den 22. April 2010 um 20:25 Uhr
Chris

still not working, and file names are correct.  here is the link to the page: http://chriscreech.com/trek/index.php?option=com_content&view=article&id=15&Itemid=22

@Chris
Mittwoch, den 21. April 2010 um 21:21 Uhr
A. Berger

Hi Chris!

The code looks fine and the text of the captions does noz cuase any trouble (tested offline). So, please re-check the image file names used and if they are fine, please provide a link to the page, I will have a look at it.

Best regards
Andreas

fade effect on next and prev buttons
108 Mittwoch, den 07. April 2010 um 10:27 Uhr
Luca

Hi, how can I add fade effect on next and prev buttons too? thank you

@Luca
Mittwoch, den 07. April 2010 um 18:00 Uhr
A. Berger

Hi Luca!

You have to enhance/rewrite the JavaScript /plugins/content/plugin_vsig/vsig.js.

Best regards
Andreas

White Dots Appearing in IE
107 Samstag, den 27. März 2010 um 16:44 Uhr
Frank

We love the plugin, but are seeing a strange behavior with IE (not with FireFox).


If you look at the site here www.mount-n-lock.com with Internet Exploror and let it rotate through the images one time, on the second time you will see a set of white dots on the first image(on the left on the bumber and on the right near the spare tire).  This only happens in IE and not firefox.  Any ideas?

White Dots Appearing in IE
Mittwoch, den 31. März 2010 um 19:05 Uhr
Frank

Thanks Andreas,  We will try the png fix and see what that does.  Will report back

@Frank
Samstag, den 27. März 2010 um 19:13 Uhr
A. Berger

Hi Frank!

Thanks for pointing me to this and no - I have no idea where this comes from. Anyway - and not without having stated that it's just a guess - you could open the stylesheet /plugins/content/plugin_besps/besps.css and in the 4th line change the selector .besps_slides div {}

from: .besps_slides div {}

to: .besps_slides div {background-color:#000000;}

This could help if the fragments are areas where the background shows up (although I have no idea why it should do). In any case I will do additional testing and investigation.

Best regards
Andreas

PS.: After replacing "fragment" and "relic" with "dot", my favorite search engine pointed me to a lot of articles dealing with this problem. Seems it is indeed a JPG specific bug in Internet Explorer 6 and 7. One solution could be to switch to PNGs.

{}caption text causing long article length
106 Sonntag, den 21. März 2010 um 23:27 Uhr
Nancy

Hi


Love this plug in, thank you.


Only one thing...If I stack 2 shows on top of one another, I get a large gap between the two. Seems that Joomla is accounting for the lines of {caption}text even though it does not show up on the front end.


For example:


{besps}photosfishing{/besps}
{besps_c}0|Trophy Redfish.jpg|Trophy Redfish{/besps_c}
{besps_c}0|Jetty Fishing.jpg|Jetty Fishing{/besps_c}
{besps_c}0|Fishing at Sunrise.jpg|Fishing at Sunrise{/besps_c}
{besps_c}0|Father and Son .jpg|Father and Son{/besps_c}
{besps_c}0|Charter Boat.jpg|Charter Boat{/besps_c}
{besps_c}0|Boys Fishing on Beach.jpg|Boys Fishing on Beach{/besps_c}
{besps_c}0|Beach Fisherman.jpg|Beach Fisherman{/besps_c}
{besps_c}0|Bay Fisherman.jpg|Bay Fisherman{/besps_c}


{besps}photosbirding{/besps}

{besps_c}1Whooping Crane.jpg|Whooping Crane{/besps_c}


Slide show 0 and slide show 1 have a space of 8 empty lines between the 2 slideshows when in the same article.


Is there a fix?


Thanks

Nancy
@Nancy
Montag, den 22. März 2010 um 19:30 Uhr
A. Berger

Hi Nancy!


The plugin already tries to remove blank spaces and linebreaks that separate the single parts of code from each other plus paragraph tags that surround the code when removing the code from the article. In your case this does not seem to work. To make sure that these unnecessary fragments get removed either have the parts of code followed one by one without linebreaks and/or blank spaces or include every single line of code in a paragraph tag.
To check how the code looks at the moment and make the necessary changes, open your article and switch to html-view.

Best regards
Andreas


 

Info
105 Donnerstag, den 18. März 2010 um 04:46 Uhr
Cathy

Please what is the code  to display it in the joomla the mod_custom ?

@Cathy
Donnerstag, den 18. März 2010 um 20:03 Uhr
A. Berger

Hi Cathy!

I'm sorry, but I am not using the extension "mod_custom" up till now - it just has been reported to work with this plugin - but I will have a look at it.

Best regards
Andreas

@Suzanne
104 Samstag, den 06. März 2010 um 20:15 Uhr
A. Berger
Hi Suzanne!

There is no padding but when you set the alignment to "float left or float right", the plugin adds a margin of 10px. To change remove it open the stylesheet /plugins/content/plugin_besps/besps.css with a text editor.
To (e.g.) remove the margin change the following selector:

.besps_holder {}

to:

.besps_holder {margin:0 !important;}

Best regards
Andreas
@Thierry
103 Samstag, den 06. März 2010 um 19:54 Uhr
A. Berger
Hi Thierry!

Not from the configuration panel because in general the slideshow works fine without additional media to configure/install, but you already modified the stylesheet before so - just give it a try.

Best regards
Andreas
padding
102 Freitag, den 05. März 2010 um 16:49 Uhr
Suzanne
It seems that there is a padding surrounding the slideshow. Can I change the padding-settings somehow?
Thanks
background transparent, drop shadow and internet explorer
101 Freitag, den 05. März 2010 um 14:13 Uhr
thierry
Hi Andreas,

Thanks for your answer, but...
I use .png pictures because my background template is not a color, I have a background image (design repeat)on my template !
Is it possible to load background-image instead of a background color in the plugins configuration panel ?
Thanks a lot

Best regards,
Thierry