Javascript: Slideshow

Geschrieben von: Andreas Berger

Samstag, den 19. April 2008 um 07:47 Uhr

bretteleben.de JavaScript Slideshow - Updated 20090406!

Ein einfaches SlideshowScript, es startet wahlweise auf Klick oder beim Laden der Seite, der Übergang erfolgt mit einem Fading, das Script läuft NonStop.

Darstellung

Das Script stellt in einem DIV-Container die ausgewählten Bilder dar. Es wird wahlweise automatisch gestartet und/oder über optionale Kontrollelemente gesteuert. Beim Laden der Seite wird der Inhalt des ausgewählten DIV-Containers mit den Bildern der Slideshow überschrieben. Das bietet die Möglichkeit, ein Bild in diesem DIV-Container statisch einzubinden und damit einen Fallback für Besucher mit deaktiviertem Javascript anzubieten. Auch ein Hinweistext wie z.B. "Die Slideshow erfordert Javascript" ist vorstellbar.

Funktionsweise

Die Funktionsweise des Scripts ist denkbar einfach. In einem umgebenden DIV-Container liegen alle Bilder übereinander. Das "Übereinander" wird dabei über die Angabe des z-index realisiert. Bei den Übergängen von einem Bild zum Anderen wird dann einfach - wie bei einem Stapel Spielkarten - immer das oberste Bild ausgeblendet und kommt ganz unter wieder in den Stapel. Mehr ist nicht dahinter.

Einrichtung und Konfiguration:

Die Einbindung in die Seite und die Verwendung der einzelnen konfigurierbaren Parameter sind auf drei Beispielseiten ausführlich erklärt:

Slideshow Beispiel 01 - nur eine Slideshow, Standardkonfiguration
Slideshow Beispiel 02 - verschiedene Seiten mit je einer Slideshow, ein Script
Slideshow Beispiel 03 - mehrere Slideshows auf einer Seite, ein Script
Hinweis: Die Erklärungen bauen aufeinander auf.

Demo

Beispiel zweier Slideshows auf einer Seite (in einem Inline-Frame angezeigt):

Kompatibilität

Das Javascript ist bislang wie folgt getestet:


Internet Explorer	6	J
Internet Explorer	7.0	J
Internet Explorer	8b2	J
Firefox	3.0.7	J
Firefox	3.1b2	J
Opera	9.63	J
Safari	3.11	J
Chrome	1.0.x	J

Hinweis: im Internet Explorer werden kleinere Bilder nicht vertikal zentriert, in allen anderen getesteten Browsern schon.

Lizenz

Das Script ist unter der GNU Public License (www.gnu.org/copyleft/gpl.html) lizensiert.

aktuelle Version: 20090406

Version 20090406

- behebt einen Fehler, ausgelöst durch eine undeklarierte Variable bei aktiviertem Shuffle

Version 20090301

- Rewrite auf Basis des Joomla Plugins
- mehrere Slideshows auf einer Seite
- Einsatz auf verschiedenen Seiten mit einer Scriptdatei
- optionale Kontrollelemente
- optionales Starten mit Zufallsbild

Version 20081101

- keine absolute Positionierung auf der Seite mehr erforderlich
- Lizenz für zukünftige Versionen GNU/GPL

Version 20080502

Sonstiges

Wenn jemand Gelegenheit findet, auf seiner Webseite einen Link auf www.bretteleben.de zu setzen, dann freut mich das natürlich, weil es mithilft, das Script bekannter zu machen. Bislang ist das Javascript "slideshow" in verschiedenen JavaScript - Resourcen verlinkt, darunter auch dem größten mir bekannten JavaScript - Archiv: HotScripts.

Für Fragen und Anregungen steht die Kommentarfunktion zur Verfügung, auch Berichte über Erfahrungen mit anderen Browsern/Betriebsystemen sind immer willkommen.

Download

Das ZIP-Archiv enthält eine Beispielseite. Mit dem Download erklären Sie sich mit den Bestimmungen der GNU Public License einverstanden.

Downloads:
Datei	Zuletzt bearbeitet
bretteleben.de.slideshow.20090406.zip	2009-04-15

Zuletzt aktualisiert am Mittwoch, den 13. Januar 2010 um 09:11 Uhr

Kommentare (165)

Hallo Flo!

Ja, und die Slideshow versucht explizit den onload Event so zu nutzen, dass andere Scripts, die das auch tun, nicht beeinträchtigt werden. Wenn das Script das Du parallel verwendest, das nicht tut, sich also nicht um Andere schert, dann gibt es nur zwei Möglichkeiten:

1.) Der onload-Befehl des Scripts, das Du parallel verwendest, muss als erstes aufgerufen werden. Wenn das so ist, die Slideshow behindert Dein zweites Script nicht und es sollte dann alles laufen.

2.) Wenn das nicht geht (weil der onload Befehl des zweiten Scripts zum Beispiel praktischerweise in den BODY-TAG der Seite muss), dann bleibt Dir nur entweder eins der Scripts wegzulassen oder das zweite Script umzuschreiben (bzw. den Entwickler darum zu ersuchen).

Gruß
Andreas

Hallo,

vielen Dank für das tolle Script. Funktioniert soweit auch einwandfrei. Nur ein kleines Problem gibt es. Ich verwende auch die Lightbox und sobald angegeben wird, funktioniert die Slideshow nicht mehr. Es können zwar die JavaScript-Datei eingebunden werden, aber onload="initLightbox();" schaltet die Slideshow ab. Es kommt keine Fehlermeldung. Sie wird nur einfach nicht geladen. Ist evtl. dieses Problem bekannt?

Grüße

Hallo Susanne!

Beides:

Du darfst Inhalte der Webseite nicht ohne ausdrückliche Genehmigung verwenden, also weder meine geistreichen Texte ungefragt abschreiben und als Deine ausgeben noch die Bilder ungefragt z.B. in Deine Seite einbauen, etc. etc.

Die Slideshow ist unter der GPL lizensiert. Das ist eine ausdrückliche Erlaubnis sie entsprechend den Richtlinien der GPL (2 oder höher) zu verwenden.
Es spricht also prinzipiell nichts dagegen, sie für ein kommerzielles Projekt einzusetzen. Es gilt halt die GPL (Copyrighthinweise unangetastet lassen, bei Modifikationen diese kennzeichnen, die Weitergabe des Scripts hat wieder unter der GPL zu erfolgen, usw.). Nichts Böses.

Gruß
Andreas

Lieber Andreas, ich habe die Javascript-Datei für die Slideshow ausprobiert und bin begeistert.
Ich würde gerne das Superscript der Slideshow für eine kommerzielle Webseite benutzen. Lt. GNU ist ein derart lizensiertes Script frei nutzbar, auch für kommerzielle Seiten. Lt. deinem Impressum liegt auf allen Inhalten deiner Website aber ein Copyright und die Verwendung ist nur mit ausdrücklicher Genehmigung erlaubt. Darf ich oder nicht????
Ich freue mich auf deine Antwort.

Andreas,

thank you very much for that code! I was searching for a slideshow which works both with InternetExplorer and Firefox, and your's the one!

Thank you also very much for your great help with including the script into my website!

The Donation will follow!!!

Best regards,
Ben

Hallo Alex!

Danke für die nette Nachricht, danke für den Link und danke für die großzügige Spende. Du hast das Repertoire positiven Feedbacks wirklich ausgeschöpft!
Wenn ich mich irgendwie revanchieren kann (zum Beispiel Deine Zeitanzeige wieder - und kompatibel - einbauen, oder was auch immer), dann gib mir bitte Bescheid (andreas_berger@bretteleben.de). Du hast definitiv etwas gut!

Gruß
Andreas Berger

Andreas,

was ich noch sagen wollte:

Auf der Startseite der Homepage www.coole-katzen.de habe ich unten einen Link auf Deine Site angebracht.

Gruß
Alex

Hallo Andreas,

mein Enkel wünschte sich für seine Tierhomepage, die ich betreue, eine Slideshow im Kopfbereich. Über Google fand ich Deine Site und Dein Script. Das Script finde ich supertoll. Relativ einfach und vor allem für den Laien hervorragend kommentiert und leicht einzubauen.
Ich hatte trotzdem Probleme. Das lag aber daran (was ich erst mal finden musste), dass ich per JavaSript auf der Homepage einen Uhrzeit-Anzeiger drinnen hatte, der über eine onload-Anweisung im Body-Tag aufgerufen wurde. Anscheinend vertrugen sich die beiden Scripts nicht (wegen des Aufrufs im Body-Tag). Die Uhr (ohnehin nur eine Spielerei) habe ich herausgenommen und danach funktionierte Deine Slideshow perfekt.

Für Dein Script ist eine Spende fällig, die ich über den Button unten links an Dich überweisen werde.

Wenn Du mal schauen willst: www.coole-katzen.de.

Gruß
Alex Halm

Hallo Peer!

Ich gestatte es nicht nur - ich bedanke mich schon im Voraus. Das ist die Art von Werbung, von der diese Seite lebt.

Gruß
Andreas

Bei Ralf von der Samothrakiseite habe ich Dein script gefunden, und bin dem link gefolgt auf Deine Seite. Das script kopiert und bei mir eingebaut war eins: Tolle Sache! Vielen Dank für Deine Vorarbeit, ich werde Dich auf meiner Seite www.sexauwetter.de verlinken, wenn Du gestattest. Vielen Dank nochmals !
Die Wetterhex aus Sexau

yvComment v.1.15.0