Startseite Joomla Simple Picture Slideshow - Anleitung Plugin Code
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 eingestellte Pfad zum Ordner (imageroot), 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 eingestellten Hauptordners (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.




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.




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.

Zuletzt aktualisiert am Mittwoch, den 12. Januar 2011 um 15:06 Uhr
 
Kommentare (38)
Calling a specific image via onclick
38 Dienstag, den 08. Mai 2012 um 16:06 Uhr
David

I would like to have a onclick event inside a Joomla module that calls a specific image into the image gallery.
The code for the link is as follows:
a href="#" img src="/images/galleries/contact/myimage.png" border="0" alt="My Image" /a

when the link above is clicked the image below would be shown in the gallery.


img src= www.dnrippy.com/zig/images/galleries/contact/2-matthylkema.jpg

Can I do this? If so how? as currently all my attempts prove fruitless. I'll probably need to write a java script to update the image source path, but I was looking for a quicker method.

Thanks and awesome plugin,
David


 

@David
Mittwoch, den 09. Mai 2012 um 20:42 Uhr
A. Berger

Hi David!

Are we talking about an image part of the slideshow?
Is the image meant to replace the sildeshow or just stop the slideshow?

Best regards
Andreas

Caption Problem
37 Sonntag, den 06. Mai 2012 um 03:21 Uhr
Paris

Hi Andreas,

Nice Work, bravo, but by me, only by 1st picture succes, but by 2nd no Caption or Text by the picture. But I am trying now, first with the Titel, not with Text anymore. Btw this shoutbox is nice, how can you add JCE or TcMIy editor in modul shout box?

Ich danke dir

@Paris
Sonntag, den 06. Mai 2012 um 20:37 Uhr
A. Berger

Hi Paris!

If you have problems with the captions, please provide a link to the page with the slideshow and the code you are using in your article. I will have a look at it.

Best regards
Andreas

Cannot get slideshow to work with custom template
36 Freitag, den 27. April 2012 um 20:28 Uhr
Ryan

I am using a custom template and having issues with the images showing up in a list, but not show as a slideshow.  Does this have something to do with not being able to use the besps.js file?  Does the js file need to be added to the index.php?  I have tried several things to understand if there is something in my CSS conflicting with the display of the slideshow and cannot figure it out.

Here is the page I am working with: imistage.nku.edu/sccsymp2012/index.php/event-pictures.html

Any help is appreciated.
Thanks!!

@Ryan
Dienstag, den 01. Mai 2012 um 15:34 Uhr
A. Berger

Hi Ryan!

Yes, probably your template does not include Joomla! head data at all (does jdoc:include type="head" exist in the index.php of your template?) or the template comes with a snippet of code to prevent mootools.js and caption.js from loading to speed up the page (and prevents the JavaScript of the slideshow from getting loaded too).

To solve the problem, just allow the plugin to load the JavaScript and the Stylesheet from the head of the page.

Best regards
Andreas


 

fwd
35 Samstag, den 14. April 2012 um 12:28 Uhr
poly

Hello Andreas! How to make picture in gallery turn over by click on picture, not only by click on buttons "previous image" and "next image".
And another question is how to make icon change color if it's hovered?

@poly
Montag, den 16. April 2012 um 20:30 Uhr
A. Berger

Hi Poly!

Im sorry, the plugin does not offer these functionalities but it is GPL licensed, so you are allowed to patch it to fit your needs.

Best regards
Andreas

fwd
34 Donnerstag, den 12. April 2012 um 14:24 Uhr
Poly

very nice plugin, thanks to the developers.
You can tell how to do, when I click on the picture was the following picture of how and when you press the button on the toolbar

@Poly
Donnerstag, den 12. April 2012 um 19:45 Uhr
A. Berger

Hi Poly!

To be honest, I have absolutely no idea what you are trying to achieve. Please consider that English is not my first language - and try to explain once again.

Best regards
Andreas

Transition in Chrome veeeery slow
33 Mittwoch, den 11. April 2012 um 05:22 Uhr
Dave

Great Plugin, I will definitely donate if I can get it configured correctly.

I am not sure why, but the transition in Chrome from the first to the second picture is very very slow. Any ideas? It doesn't seem to lag with the other photos.
See: www.###.com

Joomla version:1.6
Theme: atomic
Chrome version: up to date (18.0.1025.152)

Also, I really like how in the css gallery (www.###.com/index.php/###l), the picture shows up instantly, but with the simple gallery, it takes a while to load and shows the picture slowly.

Thanks again. Great documentation and plugin!


 


 

@Dave
Mittwoch, den 11. April 2012 um 20:30 Uhr
A. Berger

Hi Dave!

First, thanks in advance for your prospective donation. :)

Second, you should upgrade your site to Joomla!2.5.3 due to security issues fixed in 2.5.3 but not in 1.6.x and 1.7.x (www.joomla.org/announcements/release-news/5416-joomla-253-released.html)

Third, 2 questions, 1 answer:
The images you are using are far to large (in terms of dimension AND file size). Your images show with 600x400 pixels but the original files are 543x398 (57KB - this image is ok!), 1200x800 (732KB), 1000x667 (270KB) and 3375x2213 (413KB) and your first image (1EXT) is 5306x3537px and has a file size of 10902 KB!!! - this is 10MB! and this file size brings the browsers to their knees.

Please resize your image offline to the dimension your are going to use them on your site (i.e. 600x400). A file size between 60 and 80 Kilobyte will be absolutely enough to assure satisfying quality.
Your site will show smaller images faster, the slideshow will start earlier and your visitors will be deeply gratful for a fast loading site!

Best regards
Andreas

trouble with links
32 Freitag, den 06. April 2012 um 21:03 Uhr
Betty

Hello,

Thank you for this easy to use plug-in! Everything has worked perfectly except I'm having trouble understanding how to make a link to each image in my slide show. I read the info on your site and applied it to my own, but with no such luck. Can you tell me what I am doing wrong?
This is the code i put in my article:

{*besps}{/besps*}
{*besps_l}0|promo-block-1.jpg|www.google.com|testimonials|_blank{/besps_l*}
{*besps_l}1|promo-block-2.jpg|www.yahoo.com|parts-and-repairs|_blank{/besps_l*}
{*besps_l}2|promo-block-3.jpg|www.bing.com|shows|_blank{/besps_l*}

And this is a link to my test site: test.bwmhopkins.com

@Dave
Donnerstag, den 12. April 2012 um 19:57 Uhr
A. Berger

Hi Dave!

Donation received - again, thanks a lot!

Best regards
Andreas

Thanks
Donnerstag, den 12. April 2012 um 02:57 Uhr
Dave

Thank you for the quick response. That was the problem. I thought I had already reduced the size.

Look for my donation. Thanks again.

@Betty
Samstag, den 07. April 2012 um 06:17 Uhr
A. Berger

 


Hi Betty!

1.) Your images are not called promo-block-1.jpg, promo-block-2.jpg and promo-block-3.jpg but promo-block1.jpg, promo-block2.jpg and promo-block3.jpg. My tip: use short and simple file names, it will make your life a lot easier! :)


2.) The first parameter in the code for links/captions is the number of the slideshow in the current article. The plugin numbers the slideshows automatically, according to their occurence. It starts with "0" (0 - first slideshow, 1 - second, 2 - third, and so on)


Therefore your code should look like:
{*besps}{/besps*}
{*besps_l}0|promo-block1.jpg|www.google.com|testimonials|_blank{/besps_l*}
{*besps_l}0|promo-block2.jpg|www.yahoo.com|parts-and-repairs|_blank{/besps_l*}
{*besps_l}0|promo-block3.jpg|www.bing.com|shows|_blank{/besps_l*} ... without the asterisks

Best regards
Andreas


 

ZOOM
31 Freitag, den 06. April 2012 um 00:07 Uhr
vincenzo

Any chance to click into the image and open it bigger in the same page or in a bigger photogallery?

@vincenco
Samstag, den 07. April 2012 um 06:19 Uhr
A. Berger

Hi Vincenco!

Not with this plugin, sorry.

Best regards
Andreas

Thank you for the plugin
30 Samstag, den 31. März 2012 um 07:11 Uhr
Ramon Hernandez

I really like it,, a pure and simple slide show... just what I need... (no controls - no captions)... just images flowing....


Thanks again...

3. Bildunterschrift wird nicht angezeigt
29 Montag, den 19. Dezember 2011 um 09:16 Uhr
stroberry

Hallo Andreas, tolles Plugin, habe ich schon mehrmals verwendet.

Mein Problem: ich hatte erst zwei Bilder mit Bildunterschift, habe ein drittes hinzugefügt, aber diese dritte Bildunterschrift wird nicht angezeigt.

Code:
{*besps}galerie{/besps}
{*besps_c}0|bild01.png|Neue Nazarethkirche am Leopoldplatz|{/besps_c*}
{*besps_c}0|bild02.png|Alte Nazarethkirche am Leopoldplatz|{/besps_c*}
{*besps_c}0|bild03.png|Nauener Tor in Potsdam|{/besps_c*}

Link: www.ra-fkz.de

Hab ich irgendwo eine Einstellung übersehen?

Danke
stroberry

Das war ja einfach ...
Donnerstag, den 05. Januar 2012 um 12:13 Uhr
stroberry

Vielen Dank, was man manchmal so übersieht vom zu vielen Gucken ...

Tolles Plugin, toller Support, danke.

@stroberry
Montag, den 19. Dezember 2011 um 21:30 Uhr
A. Berger

Hallo stroberry!

Du hast kein Bild "bild03.png", Du hast allerdings ein Bild "bild 03.png". Versuchs mal mit dem. :)

Gruß
Andreas

Deutsch
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Wer ist online
Wir haben 20 Gäste online