Hauptmenü
Meist gelesen
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_mostread/helper.php on line 79
Support

Wenn Sie die Erweiterungen und Scripts auf diesen Seiten nützlich finden, freue ich mich über Ihre Unterstützung. Danke!

Betrag: 

Neueste Beiträge
Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109 Warning: Creating default object from empty value in /var/www/clients/client396/web1968/web/modules/mod_latestnews/helper.php on line 109
Simple Picture Slideshow Plugin Installation und Verwendung
Geschrieben von: Andreas Berger   
Donnerstag, den 08. Januar 2009 um 17:34 Uhr

Eine Schritt für Schritt Anleitung für Installation und Verwendung des bretteleben.de Simple Picture Slideshow Plugins.

Installation

1.) In die Administrationsoberfläche einloggen


2.) Den Menüpunkt "Erweiterungen" > "Installieren/Deinstallieren" auswählen


3.) Die Paketdatei mit dem bretteleben.de Simple Picture Slideshow Plugin auswählen


4.) Auf "Hochladen und Installieren" klicken


5.) Wenn alles geklappt hat, erhält man die Meldung "Plugin erfolgreich installiert"


6.) Den Menüpunkt "Erweiterungen" > "Plugins" auswählen


7.) Das "bretteleben.de Simple Picture Slideshow" suchen und anklicken


8.) Der erste Abschnitt betrifft die Darstellung der Slideshow auf der Seite.
Der erste konfigurierbare Parameter ist die Breite der Slideshow in Pixel.


9.) Als nächstes kommt die Höhe der Slideshow.



Bilder die größer sind, als hier angegeben, werden entsprechend den Vorgaben im Browser skaliert. Kleinere Bilder werden nicht vergrössert. Soweit möglich sollte man die Bilder in dem Format hochladen, in dem sie dann auch auf der Seite dargestellt werden, da ein Skalieren durch den Browser Qualitätsverluste mit sich bringt und unnötig große Bilder die Ladezeit der Seite verlängern ohne dem Besucher einen entsprechenden Mehrwert zu bieten.


10.) Der nächste Parameter legt die Positionierung der Galerie relativ zum verfügbaren Platz fest. Zur Auswahl stehen Links, Zentriert, Rechts, float left und float right. Die beiden letzten Optionen ermöglichen es, die Galerie mit Text umfliessen zu lassen. Sie machen die Galerie gleichzeitig aber auch wesentlich abhängiger vom verwendeten Template und werden wohl nicht immer den gewünschten Effekt haben.


11.) Background Color: Die Hintergrundfarbe der Slideshow ist dann von Bedeutung, wenn verschieden große Bilder verwendet werden und verhindert, dass das nächste Bild unter dem aktuellen Bild zu sehen ist. Gesetzt wird der hexadezimale Farbwert ohne vorangestellte Raute (#), also z.B. ffffff für weiß.


12.) "Sort Order" regelt die Reihenfolge, in der die Bilder angezeigt werden. Zur Auswahl stehen die Optionen alphabetisch aufsteigen, alphabetisch absteigend, von alt zu neu und von neu zu alt (jeweils Änderungsdatum und nicht Erstellungsdatum!) und zufällig.


13.) Der nächste Abschnitt regelt die Animation.
"Time to show" ist dabei die Zeit, die jedes Bild zwischen zwei Übergängen gezeigt wird in Sekunden.


14.) "Duration of Fading" ist die Dauer, die für den Übergang selbst vorgesehen ist, wieder in Sekunden. In den meisten Fällen wird hier 1 in Ordnung sein.


15.) Das Plugin verschiebt die Transparenz von 100% zu 0% (bzw. umgekehrt). "Fading steps" gibt die Schrittweite an. 5 bedeutet, dass die Transparenz in 5 Schritten um je 20% verringert wird. Bei 50 sind es 50 Schritte mit je 2%. Je höher der Wert, dest flüssiger - aber auch rechenintensiver das Überblenden. Ein zu hoher Wert führt bei großen Bildern dazu, dass die Zeitvorgabe überschritten wird. Einfach ausprobieren.


16.) Der nächste Parameter legt fest, ob die Slideshow mit dem Laden der Seite automatisch starten soll.


Diese Option kann auch dann gewählt werden, wenn man Links/Buttons anzeigt. Auf die Funktion hat das keinen Einfluss.


17.) Der nächste Abschnitt betrifft die optionalen Links/buttons zur Steuerung der Slideshow.
Der erste Parameter legt fest, ob diese überhaupt verwendet werden sollen.


18.) Der zweite Parameter regelt, welche Elemente angezeigt werden, ob sie links oder rechts angeordnet sind und in welcher Reihenfolge.


Das alles geschieht über die Eingabe einer Kombination aus den Werten 1, 2, 3, 4, 5 und dem Minuszeichen.

1 ... der Counter
2 ... Link/Button Start
3 ... Link/Button Stop
4 ... Link/Button Zurück
5 ... Link/Button Vor
'-' ... das Minuszeichen teilt die Elemente in links und rechts. Wird es weggelassen, erscheinen alle Elemente rechts.

Beispiele:
1-2345 . . . . links der Counter, rechts die vier Buttons/Links.
415 . . . . der Button/Link zurück, dann der Counter, dann der Button/Link vorwärts, alle rechts (kein Minus enthalten)
415- . . . . nochmals die selben Elemente, diesmal aber links


19.) Die nächsten 4 Parameter legen fest, was für die Links angezeigt werden soll.



- Lässt man die Eingabefelder leer, dann werden die automatisch installierten Standardbuttons angezeigt.

- Gibt man Text ein, dann wird dieser verwendet.

- Statt Textlinks können auch Bilder verwenden werden. Dazu gibt man den Namen des jeweiligen Bildes inklusive Dateiendung ein. Das Plugin erkennt die Eingabe .jpg, .gif und .png und sucht im eingestellten Ordner (Parameter weiter unten, per default: /images/stories/besps_buttons) nach Bildern dieses Namens. Sind sie vorhanden, dann werden sie angezeigt.


20.) Aktiviert man die Option "Show Captions", dann hat man die Möglichkeit, im Beitrag die Bilder einer Slideshow mit Titel und Text zu versehen.


Auch bei deaktivierter Option wird der Titel von Captions für den ALT- TITLE- TAG der Bilder verwendet und kann genutzt werden um hier den Dateinamen zu ersetzen.


21.) "Position of Captions" legt fest, ob Titel und Text halbtransparent über das Bild eingeblendet oder unter dem Bild angezeigt werden sollen.


22.) Mit der Aktivierung von "Use links?" hat man zusätzlich die Möglichkeit, die Bilder der Slideshow zu verlinken. Link, Titel und Ziel (Attribut target) werden im Artikel angegeben.


23.) Image root legt den Stammordner fest, in dem (direkt oder in Unterordnern) alle Bilder liegen. Standardmässig ist hier der Ordner /images/stories/ eingestellt (und dieser Ordner wird auch verwendet, wenn das Feld leer ist). In den meisten Fällen ist hier keine Änderung erforderlich, nur wer seine Bilder in einer Ordnerstruktur außerhalb von /images/stories/ organisiert hat, der kann hier den entsprechenden Pfad angeben.
Der hier festgelegte Pfad wird vom Plugin bei jedem Aufruf einer Galerie automatisch ergänzt und darf im Code im Artikel nicht mehr wiederholt werden!


24.) Buttonfolder
Wer für die Verwendung von Sets eigene Buttons erstellt hat, kann diese hier festlegen, in welchem Ordner das Plugin diese suchen soll. Per default ist der Ordner /images/stories/besps_buttons/ (wird nicht automatisch erstellt) eingestellt. In diesem sucht das Plugin auch, wenn dieses Feld leer ist.


25.) Stylesheet

Wer das Stylesheet besps.css verändert oder ein komplett eigenes Stylesheet verwenden möchte, der kann es im Ordner des Plugins (/plugins/content/plugin_besps) ablegen und danach hier auswählen.
Das hat den Vorteil, dass ein unter einem anderen Namen abgespeichertes Stylesheet auch bei einem Update unverändert erhalten bleibt, während das Default-Stylesheet besps.css beim Update überschrieben wird.


26.) JavaScript

Wer das JavaScript besps.js verändert oder ein komplett eigenes JavaScript verwenden möchte, der kann es im Ordner des Plugins (/plugins/content/plugin_besps) ablegen und danach hier auswählen.
Das hat den Vorteil, dass ein unter einem anderen Namen abgespeichertes JavaScript auch bei einem Update unverändert erhalten bleibt, während das Default-JavaScript besps.js beim Update überschrieben wird.


27.) Preload

Der nächste Parameter bietet die Möglichkeit, den Seitenaufbau zu beschleunigen, indem man für einen Teil der Bilder der Slideshow in einem ersten Schritt nur ein sehr kleines Platzhalter-Bild lädt. Dieses "besps.png" wird mit dem Plugin im Ordner /plugins/content/plugin_besps automatisch installiert. Nach dem Laden der Seite ersetzt das Script dieses Platzhalterbild mit den tatsächlichen Bildern.

In der Grundeinstellung werden alle Bilder statisch mit der Seite geladen. Gibt man hier eine Zahl größer 3 (soviele Bilder werden immer mindestens statisch geladen) ein, dann wird damit für die restlichen Bilder der Slideshow das Nachladen per Script aktiviert.

Beispiele:
10 Bilder liegen im Ordner, keine Eingabe, alle werden statisch geladen.
10 Bilder liegen im Ordner, Eingabe 3, 3 Bilder werden statisch, 7 per Script geladen
10 Bilder liegen im Ordner, Eingabe 5, 5 Bilder werden statisch, 5 per Script geladen usw.

Das Feature ist experimentell, das Script überprüft vor dem Aufruf eines Bildes derzeit noch nicht, ob es ein tatsächliches Bild oder ein Platzhalterbild aufruft. Wer den Parameter verwendet, sollte das Ergebnis ausgiebig testen. Rückmeldungen sind hochwillkommen!


28.) Der Parameter "Foldername as ID" bietet die Möglichkeit, den einzelnen Slideshows den Namen des Ordners, aus dem die Bilder stammen als Identity des umschließenden DIV-Containers zuzuweisen (id="ordnername").



Das Plugin beinhaltet im Ordner (Joomla-Installation)/plugins/content/plugin_besps das Stylesheet besps.css. Dieses wird nach den Styleangaben geladen, die das Plugin in den Head-Bereich der Seite schreibt, und ermöglicht es, jede Angabe manuell zu überschreiben. Das ist immer möglich, eine hier getroffene Angabe bezieht sich auf alle Simple Picture Slideshows eines Internetauftritts.
Mit der Zuweisung einer eindeutigen Identity hat man nun aber zusätzlich die Möglichkeit, jede einzelne Slideshow individuell zu gestalten, indem man die Identity als übergeordneten CSS-Selektor verwendet und nach den allgemeinen Angaben einzelne Slideshows gesondert gestaltet.


29.) Das Plugin aktivieren


30.) Auf Speichern klicken - und fertig




Verwendung

Damit man mit dem Plugin etwas anfangen kann, brauchen wir als Nächstes die entsprechenden Bilder. Diese legen wir in einem Ordner unter (Joomla-Installation)/images/stories ab.

1.) Den Menüpunkt "Site" > "Medien" auswählen


2.) Hier in den Ordner "Media" > "stories" wechseln


3.) Einen neuen Unterordner für die Bilder anlegen. Im Beispiel wähle ich dafür den Namen "simpleslideshow"


4.) In den neu angelegten Ordner wechseln.


5.) Und hier die Bilder hochladen. Das Plugin akzeptiert die Dateitypen ".jpg", ".gif" und ".png".


6.) Optional: Sollen unterhalb der Slideshow eigene grafische Buttons angezeigt werden, dann müssen wir uns auch um diese kümmern. Dazu wechseln wir nochmals in den Ordner "stories".

 

Und erstellen hier den Ordner besps_buttons. In diesem Ordner sucht das Plugins nach den Bildern, die wir unter Punkt 19 (Installation) angegeben haben.

Also laden wir sie hier auch hoch.

Hinweis: Das Plugin erzeugt diesen Ordner NICHT automatisch.


7.) Jetzt im Menüpunkt "Inhalt" > "Beiträge" den gewünschten Beitrag öffnen.


8.) An der gewünschten Stelle den Code zum Aufruf des Plugins eingeben.


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 im Backend festgelegte Pfad zum Ordner, 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 im Backend festgelegten Pfades (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.

Will man zusätzlich zu den Bildern auch Text anzeigen, die Bilder verlinken oder für die aktuelle Slideshow die im Backend eingestellten Werte überschreiben, dann geht es im zweiten Teil der Anleitung (Link am Ende der Seite) weiter.


9.) Speichern - Fertig!


Übersicht über die Möglichkeiten des Aufrufs direkt aus dem Artikel: Anleitung Plugin Code




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 (41)
Klasse Plugin
11 Mittwoch, den 01. Juni 2011 um 23:27 Uhr
Tom

Hallo, vielen Dank für das einmalige Plugin. Ich hätte allerdings eine Frage. Gibt es eine Möglichkeit, die Bilder von einem anderen Webspace "einzubinden"? Leider funktioniert es nicht wenn ich unter Image Root die betreffende URL einfüge.

Danke
Tom

@Tom
Donnerstag, den 02. Juni 2011 um 20:26 Uhr
A. Berger

Hallo Tom!

Nein, das Plugin arbeitet nur mit lokalen (innerhalb des Rootverzeichnisses der Joomla!-Installation) Bildern.

Gruß
Andreas

Vielen Dank!
10 Samstag, den 28. Mai 2011 um 14:56 Uhr
Kathrin

Nach deiner Anleitung habe ich die Slideshow installiert und eingerichtet! Vielen Dank, super easy und verständlich. Die Slideshow läuft und sieht super aus.

embedd html links?
9 Mittwoch, den 25. Mai 2011 um 05:36 Uhr
ken

Looks promising!  Does this plugin allow me to embed a unique html link for each picture?

Thanks

@ken
Mittwoch, den 25. Mai 2011 um 19:51 Uhr
A. Berger

Hi ken!

Yes, check the feature "Links" at the page "Howto Plugin Code" (find the link in the menu at the left).

Best regards
Andreas

Thank you
8 Dienstag, den 24. Mai 2011 um 20:57 Uhr
Shahar Galukman

Great plugin, works great and really helpful tutorial.

Thanks

troubleshooting Simple Slideshow
7 Dienstag, den 03. Mai 2011 um 20:37 Uhr
Wackychick

Have used your plugin on several sites with great success... installed it today and it won't work and I'm not sure what I'm missing.  I put the {*besps}slides{/besps*} in a custom html module (how I usually do it) and all I'm seeing is the {*besps}slides{/besps*} - the plugin IS enabled, the photos ARE in the folder in the correct location etc...  Just thought I'd share - i'm frustrated and have to try something else at this point.  Drat!

You're totally right!
Dienstag, den 03. Mai 2011 um 22:12 Uhr
Wackychick

I DO want to take a look!  I was mistaken about using it in modules before - I did NOT use it in a module before (duh!) and totally missed the FAQ & Troubleshooting link to the left when I was here earlier...  Thanks EVER so much!!!

@Wackychick
Dienstag, den 03. Mai 2011 um 20:49 Uhr
A. Berger

Hi Wackychick!

The FAQ&Troubleshooting for this plugin (find the link in the menu at the left) has - up till now exactly 1 item. And this 1 item explains how to use the plugin at a module position instead of inside an article. Maybe you want to have a look.

Best regards
Andreas

Multiple Slidshows
6 Montag, den 25. April 2011 um 19:13 Uhr
Steve

I have added 2 slideshows to a clients site using Simple Picture Slideshow.  It was easy to install and works great. I have them set to auto advance. I would like to add a third slideshow, but i need it to use controls to advance. Is this possible? thanks

Steve

@Steve
Montag, den 25. April 2011 um 20:52 Uhr
A. Berger

Hi Steve!

Yes, the feature "Parameter Overrides" allows to override the settings from the backend by adding "parameter=value"-pairs to the code in the article. Check the page "Howto Plugin Code" (find the link in the menu at the left), it explains the feature.

Best regards
Andreas

not working
5 Donnerstag, den 21. April 2011 um 12:43 Uhr
werner

in my article i place {*besps}simpleslideshow{/besps*}.

i have followed all the steps and the plug-in is enabled. yet once i go to the sit i dont see a slideshow i only see the text {*besps}simpleslideshow{/besps*}.

Any advice?

@werner
Donnerstag, den 21. April 2011 um 21:20 Uhr
A. Berger

Hi werner!

Please make sure that
- you are using the code without the asterisks :)
- you don't try to use the plugin at a module position (if so, check the page FAQ&Troubleshooting for possibilities to do so)
- the code is not fragmented by HTML-tags (open the article and switch to HTML-view)

If the problem persists, please post a link to the page, I will have a look at it.

Best regards
Andreas

How to make it work with subfolders
4 Mittwoch, den 20. April 2011 um 00:53 Uhr
Tom

Hi,

I'm using Joomla 1.5
put my imgaes under /images/stories/myimages/

folder1
folder2
folder3

in the article I put {*besps}/myimages/{/besps*}
But it didn't show the images, instead it says there are no images to present in myimages folder.
Help?

@Tom
Mittwoch, den 20. April 2011 um 21:02 Uhr
A. Berger

Hi Tom!

If "/images/stories/myimages" is the folder that contains all of your images, lets call it the "image root" folder. In the configuration panel of the plugin set the parameter "Image Root" to "/images/stories/myimages/". From now on, the plugin will add this part of the path to every foldername/path you insert in the code in an article.
Therefore, in your article show the images within the folder "/images/stories/myimages/folder1" with {*besps}folder1{/besps*} (... without the asterisks), the images within "/images/stories/myimages/folder2" with {*besps}folder2{/besps*} (... without the asterisks) and so on.

Best regards
Andreas

Slideshow in a module.
3 Dienstag, den 19. April 2011 um 15:03 Uhr
Michael

Hi. The simple picture slideshow is great, thanks. My home page is set up as a module and I was wondering how would I go about have my slideshow appear on this page. It show perfectly on any article pages but doesn't appear when I try and put it into a module. I'm new to Joomla so my knowledge of it is very basic.

@Michael
Dienstag, den 19. April 2011 um 20:44 Uhr
A. Berger

Hi Michael!

If you want to show the slideshow at a module position, you could use a module for custom content, or a module to embed articles in modules. Anywhere, there are limitations.
First, not all of these extensions allow the plugin (or content plugins at all) to work. The page FAQ&Troubleshooting lists two extensions (there may be more - if you find one, please let me know) that allow the plugin to be used at module positions.
Secondly, please be aware that - even if the plugin works this way - the fact that a module is not an article - up till now (till the next version is out) causes problems if you are going to use multiple instances of the plugin on one page because the plugin will not be able to write unique identifiers for JavaScript and CSS. If you need multiple instances on one page, I would indeed use a slideshow, explicitly developed as a module.

Best regards
Andreas

displaying the gallery for all pages
2 Mittwoch, den 06. April 2011 um 21:37 Uhr
Britney
Hi Andreas
nice plug-in first of all.
I have a problem anyway!
I wonder if I can display the gallery for all my site! not for a determine article

thanks alot
@Britney
Mittwoch, den 06. April 2011 um 21:54 Uhr
A. Berger

Hi Britney!

If you want to show the slideshow at a module position, you could use a module for custom content, or a module to embed articles in modules. Anywhere, there are limitations.
First, not all of these extensions allow the plugin (or content plugins at all) to work. The page FAQ&Troubleshooting lists two extensions (there may be more - if you find one, please let me know) that allow the plugin to be used at module positions.
Secondly, please be aware that - even if the plugin works this way - the fact that a module is not an article - up till now (till the next version is out) causes problems if you are going to use multiple instances of the plugin on one page because the plugin will not be able to write unique identifiers for JavaScript and CSS. If you need multiple instances on one page, I would indeed use a slideshow, explicitly developed as a module.

Best regards
Andreas

Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 129 Warning: Illegal string offset 'active' in /var/www/clients/client396/web1968/web/templates/biz_blue_ii/html/pagination.php on line 135
Deutsch
Panoramic Image Viewer
Follow me on Facebook
Follow me on Google+

bretteleben.de

Add to circles

Wer ist online
Wir haben 57 Gäste online