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)
slide show runs on only admin login
120 Samstag, den 19. Juni 2010 um 05:38 Uhr
amey

My slideshow runs only when i am logged in in my site as  "Administrator".

Otherwise it shows only first image .

@amey
Sonntag, den 20. Juni 2010 um 11:26 Uhr
A. Berger

Hi amey!

The plugin adds CSS and JavaScript to the Joomla! head data. Please check the source of your page when loggin and when not logged in. Maybe you are using an extension or a template that prevents JavaScript to get loaded for visitors (to speed up the page and to cause my plugin to fail ;)).

Best regards
Andreas

Excellent plugin
119 Freitag, den 18. Juni 2010 um 13:43 Uhr
Grandpa

I operate several Joomla sites and have made extensive use of this plugin.
Many of my sites have common content.  To save space on the server, is it possible to get the photos from another location than /images/stories/ ?

@Grandpa
Sonntag, den 20. Juni 2010 um 11:20 Uhr
A. Berger

Hi Grandpa!

Although it is possible to set the image root folder to the Joomla! root (see line 33 in the file /plugins/content/besps.php) and this option will be moved to the backend in future versions due to the fact that the main image folder in Joomla! 1.6 - as far as I know up till now - will be /images instead of /images/stories there is no option planned to use a folder outside the Joomla! root.

Best regards
Andreas

captions and sort order
118 Freitag, den 18. Juni 2010 um 04:35 Uhr
John Collier

While looking for your reply to my comments earlier this week, I read the 2nd section on various parameters that control the overall slide presentation:

1)  in order to present captions for all slides, you have to insert |caps=1| into the base parameter;  the 3rd section on titles and caption controls doesn't mention this; it should
{*besps}tour|caps=1|{/besps}

2)  I found that the image title is the controlling presentation sort order in spite of any sequence that the captions or titles are presented

You might add this to your instructions or even edit my comments to remind less technical users like me.
I am using both your image viewer and now the slide show;  they present pictures very well and easily now that I figured out the "tricks of the trade"


 

@John Collier
Sonntag, den 20. Juni 2010 um 11:16 Uhr
A. Berger

Hi John!

1) To show captions, enable them in the backend (refer to Howto Plugin). "caps=1" is a parameter override that allows to override a setting in the backend configuration panel for one specific slideshow. This means, you have to use it only if you want to show captions for a slideshow although you disabled them in the backend. If you are using them throughout your site - use the correct backend setting.

2) Making this part of the tutorial would - in my opinion - create more confusion than it solves. The sorting options are "A-Z", "Z-A", "date ascending", "date descending" and "random". Up till now there have been no questions about if these options target the image file (option 3 and 4 are only applicable to a file) or the - optional - feature "Captions".

Best regards
Andreas

AWESOME!!!!
117 Mittwoch, den 16. Juni 2010 um 19:39 Uhr
LauriS

As an instructor I am very critical of products that have little or poor documentation and as a new Joomla user I heavily rely on the documentation ot guide me.


Your documentation ROCKS!!!  Step by step, WITH screenshots!  I'm in heaven!!


I just downloaded the file, set it up and got my first slideshow up in running in less than 20 minutes - with 15 minutes of that time spent uploading my photos into Joomla.


I LOVE this extension - easy to use and awesome instructions!

A noob question
116 Freitag, den 11. Juni 2010 um 03:17 Uhr
Nishant

Hi

First of all thankis for providing such a effective and clean plugin. I was looking for something like this but I have a few doubts which can be cleared by you (hopefully)

1. For search engines, the captions and text will be read as text OR as a part of the image only ? We shall be putting up our key points in such a manner and I was just a bit concerned whether it would be visible as text or not?

2. Regarding specifying the Captions, would we simply need to make changes in 'Besps.php' file and add the code (mentioned in your tutorial) within the captions block at the end ? I know it sounds basic but I am just starting and frankly have little idea about joomla or php for that matter.

TIA
Nishant

@Nishant
Montag, den 14. Juni 2010 um 19:13 Uhr
A. Berger

Hi Nishant!

1.) Title and text of the initial Caption (first image) is text within a div-container (just have a look at the source of the page. captions of follow up images are part of a JavaScript array.

2.) The tutorial does NOT mention that the captions get defined within the script file besps.php. Captions are set with additional lines of code within the article that holds the slideshow. Please check the tutorial again. :)

Best regards
Andreas

error in firefox
115 Montag, den 07. Juni 2010 um 19:19 Uhr
PencaitlandPiper

I have used your plug-in happily for some time, for which, many thanks ; but now it does not work in Firefox, only in IE; has something changed?

@PencaitlandPiper
Dienstag, den 08. Juni 2010 um 21:19 Uhr
A. Berger

Hi PencaitlandPiper!

About the changes, please have a look at the page version history because what has changed depends on the version you used before updating.
About Firefox, it works fine for me here but there may always be problems with different templates and/or other extensions I haven't foreseen so please provide a link to the page with the slideshow, I will have a look at it.

Best regards
Andreas

Great Slideshow, Quick Question
114 Donnerstag, den 27. Mai 2010 um 14:31 Uhr
DR81

First, I'd like to say that this slide show plug-in is awesome and that it has worked really well for me. Second, I'd like to ask a quick question: When I try to link to a pdf document in the media manager folder on my website, the image that I am linking from in my slideshow will link back to the homepage of the website and not the pdf document that is stored on my website. In other words, I have a link to a pdf document on my website that works, but when I try to link to that pdf document from an image in the slideshow, the image directs me to the homepage of my website, not the page on my website where the pdf document is displayed.

Thanks again for a great plug-in.
DR

@DR81
Donnerstag, den 03. Juni 2010 um 21:02 Uhr
A. Berger

Hi Sebastian!

You can change the appearance of the captions in the stylesheet of the plugin: /plugin/content/plugin_besps/besps.css

.besps_caps {} ... captions in general
.besps_caps div.bs_inside {} ... captions, placed over the main image
.besps_caps div.bs_outside {} ... captions, placed below the main image
.besps_slides div a, .besps_slides div a:link, .besps_slides div a:visited, .besps_slides div a:focus, .besps_slides div a:hover, .besps_slides div a:active {} ... appearance of title and text line if feature links is activated
.besps_caps div span {} ... appearance of the title line
.besps_caps div span + span {} ... appearance of the text line

Best regards
Andreas

Figured It Out, but a quick question about caption sizes
Donnerstag, den 03. Juni 2010 um 18:48 Uhr
DR81

Nevermind. I figured it out--it was my fault, not the code. Thanks for answering my question.


One more quick question: is there anyway to change the background color and/or the font size of the caption fields that display in the slideshow?


Thanks again for all of your help!!

@DR81
Donnerstag, den 27. Mai 2010 um 20:26 Uhr
A. Berger

Hi DR81!

Please post at least the code you are using for this link in the article and - if any possible - provide a link to the page with the slideshow. I will have a look at it.

Best regards
Andreas

Obrigada
113 Donnerstag, den 27. Mai 2010 um 04:19 Uhr
Carla

Estou muito feliz...faz algum tempo q estava tentando colocar um slideshow e nunca conseguia até encontrar o seu site com as suas detalhadas explicações! MUITO OBRIGADA!!!!!

_blank not working
112 Mittwoch, den 19. Mai 2010 um 15:59 Uhr
Franco

Andreas, your slideshow is a masterpiece. But I have a bug to report. The _blank parameter does not open a new window. Here is the code (with asterisks, of course):

{*besps_l}0|1.jpg|index.php?option=com_content&view=article&id=321&Itemid=317|_blank{*/besps_l}

Maybe I did something wrong...

Franco

@Franco
Mittwoch, den 19. Mai 2010 um 21:03 Uhr
A. Berger

Hi Franco!

First: Many thanks for your voting at the JED (I suggest it's been you)!

About your question:

Your code is missing the link title:

{*besps_l}0|1.jpg|index.php?option=com_content&view=article&id=321&Itemid=317|_blank{*/besps_l}
{*besps_l}0|1.jpg|index.php?option=com_content&view=article&id=321&Itemid=317|Super Interesting Article|_blank{*/besps_l}

If you don't want to use a title, the vertical bar has to be present anyway:
{*besps_l}0|1.jpg|index.php?option=com_content&view=article&id=321&Itemid=317||_blank{*/besps_l}


If the problem persists after adding the param, please check with different browsers because if the browser is set to open links in the same window at any cost - there is nothing you can do against it.

Best regards
Andreas

Error when using with Jquery Translator
111 Dienstag, den 11. Mai 2010 um 23:13 Uhr
Adan

Hi:

I'm testing the simple gallery and it works fine until I use togheter with Jquery Translator. It shows the first caption of the the image permantly with the slideshow. I wanted to include a pictures but it didn't let me

Thanks in advance.
Adan

@Adan
Donnerstag, den 13. Mai 2010 um 08:54 Uhr
A. Berger

Hi Adan!

Could you provide a link to the page? I will have a look at it.

Best regards
Andreas