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)
So far so good .... in fact very good
31 Freitag, den 06. Januar 2012 um 07:07 Uhr
Neville Rodrigues

tried somre other plugins but they wouldn't work on multiple uses

yours does ... Thank you ... excellent plugin

danke
30 Donnerstag, den 05. Januar 2012 um 15:32 Uhr
vian

hallo andreas,

die simple-picture-slideshow habe ich erstmals eingesetzt & bin sehr zufrieden mit diesem einfach zu konfigurierenden tool. (fast) alles klappt bestens (eine krise ist überstanden, bei der ich allerdings nicht ganz verstanden habe, was sie auslöste. habe das ganze neu installiert, danach lief es wieder rund.)

danke auch für die anleitung, sie hat die einarbeitung vereinfacht.

schöne grüße aus berlin
vian

Joomla 1.7
29 Donnerstag, den 05. Januar 2012 um 10:07 Uhr
Yann L.

Hi, the plugin looks great, but this tutorial don't match with Joomla 1.7.

I didn't find the "stories" directory. I've only "banners", "illustrations" and "sampledata" in Media. And a simple windows search shows there's no longer a stories directory.
How it works with 1.7?
I hope I am understandable, and sorry for the bad English.

Thanks for help

@Yann L.
Mittwoch, den 11. Januar 2012 um 16:15 Uhr
A. Berger

Hi Yann!

The version for Joomla!1.6 and Joomla!1.7 refers to the default image folder of these Joomla! versions which is /images/ (whilst it has been /images/stories/ in Joomla!1.5). The tutorial states this and no worry, it works with Joomla!1.7 :)

Best regards
Andreas

showing code instead of pictures
28 Montag, den 12. Dezember 2011 um 05:12 Uhr
btealtn

Hi. I love this plugin and have used it on a couple of other websites. But I cannot get it working on this one: sca.heymisterdesigns.com. It is showing the code instead of the pictures.

I have the plugin enabled and have doublechecked the path.

plugin -  /images/stories/
module - {*besps}slideshow/frontpage{/besps*}
actual path - images/stories/slideshow/frontpage

Thank you for the help.

@btealtn
Dienstag, den 13. Dezember 2011 um 20:30 Uhr
A. Berger

Hi btealtn!

Seems you already switched to another extension. Anyway, if somebody else has problems getting the plugin to work at a module-position, please check the page "FAQ&Troubleshooting" for information about this issue.

Best regards
Andreas

Not working on 1.5.20 site
27 Montag, den 21. November 2011 um 14:58 Uhr
Russ

Hi the images dont change automatically for me, also controls dont seem to work (when I enable them) - it will load a different image when the page is refreshed so seems to be getting the containing folder info. Source code looks OK, I've compared it to a working example.

Can you help?

Many thanks

@russ
Montag, den 21. November 2011 um 21:50 Uhr
A. Berger

Hi russ!

Sounds like either an extension (or a snippet in the index.php of your template) prevents the JavaScript /plugins/content/plugin_besps/besps.js from getting linked from the page head or another JavaScript causes a failure.
If you could provide a link to the page, I will have a look at it.

Best regards
Andreas

SUPER und DANKE!!!!!
26 Sonntag, den 13. November 2011 um 20:29 Uhr
Udo

Ich, 64 Jahre, hab es dank Deiner Beschreibung geschafft.
DANKE für die SUPER Beschreibung.

About navigation buttons
25 Samstag, den 05. November 2011 um 06:23 Uhr
John77

?ello and thank you for an excellent plugin.

I was wondering whether it is possible to hide navigation button in a slideshow in article A , but show the buttons in a different slideshow in article B . I obviously cannot do this from the  plugin manager where i have to choose whether the buttons will show for every article that uses the plugin

Thanks in advance

@John77
Montag, den 07. November 2011 um 20:48 Uhr
A. Berger

Hi John77!

Have a look at the page "Howto Plugin Code" (menu at the left), it explains how to use the feature "Parameter Overrides" which allows to override the values you set in the backend for a specific slideshow by adding "parameter=value" pairs to the code in the article.
This way you can create unlimited slideshows with different settings each.

Best regards
Andreas

Transparent backgroung
24 Donnerstag, den 03. November 2011 um 23:23 Uhr
Amy Lewis

Hi and thanks for writing such an easy to use Plugin. It worked perfectly from the start.
Is there any way to opt for no background color (transparent)?

Thank you!

@Amy Lewis
Donnerstag, den 03. November 2011 um 23:30 Uhr
A. Berger

Hi Amy!

Yes and No :)
Yes, it is possible, just set the background color to a value like e.g. "transparent" and you will get a transparent background because this setting gets misinterpreted by the browser - anyway, it helps to understand the second part of my answer which is:

No, because a transparent background has the unwanted side-effect that the next image in the row gets visible (100%) to early if you are using semi-transparent images or images of different size (and I suppose you do, because otherwise a transparent background wouldn't make any sense).

Best regards
Andreas

slideshow measures
23 Donnerstag, den 03. November 2011 um 12:00 Uhr
luigi

hello, if I want a slideshow with different measures (height and width) in several articles I can do?

@luigi
Donnerstag, den 03. November 2011 um 20:14 Uhr
A. Berger

Hi Luigi!

Check the page "Howto Plugin Code" (menu at the left), it explains the feature "Parameter Overrides" that allows to set values different from the settings in the backend for a single slideshow by adding "parameter=value" pairs to the code in the article.

Best regards
Andreas

image pathway
22 Mittwoch, den 02. November 2011 um 20:09 Uhr
juan

I think I am really going to like this plugin, but am having trouble with the install.  The /images/stories/ directory does not appear in my Media Manager directory.  Any suggestions. Joomla! v.1.6.

@juan
Mittwoch, den 02. November 2011 um 21:13 Uhr
A. Berger

Hi juan!

The plugin uses by default the standard image folder of the respective Joomla! version (/images/stories for Joomla!1.5 and /images for Joomla!1.6 and Joomla1.7).  Therefore - in most cases - you won't need any changes. If you want to use another folder as your root image folder, the parameter ""Image root" allows to change this behavior.

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 59 Gäste online