Javascript: Slideshow

Geschrieben von: Andreas Berger

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

bretteleben.de JavaScript Slideshow - Updated 20100412!

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

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: 20090412

Version 20100412

- behebt im Internet Explorer das Problem weißer Punkte auf schwarzen (#000) Stellen im Bild

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.20100412.zip	2010-04-12

Zuletzt aktualisiert am Montag, den 12. April 2010 um 21:23 Uhr

Kommentare (187)

continous

7 Samstag, den 25. Oktober 2008 um 19:01 Uhr

hellyeah

does it restart when it navigates through webpages????

lightning speed

6 Samstag, den 25. Oktober 2008 um 18:53 Uhr

langaw360

that was fast.....

thanks a lot....

great site!!!!! keep up the gud work

thnx for the code

@langaw360

5 Samstag, den 25. Oktober 2008 um 18:39 Uhr

A. Berger

hi langaw360!

its controlled by the following three paramaters in the upper part of the script:
sdur=3; //time to show a pic between fades in seconds
fdur=1; //duration of the complete fade in seconds
steps=20; //steps to fade from on pic to the next

greets
Andreas

time on how fast the pic changes

4 Samstag, den 25. Oktober 2008 um 18:35 Uhr

langaw360

thnx for the code....
wheres the line where i could change on how fast the pics changes???

Slideshow

3 Sonntag, den 31. August 2008 um 15:58 Uhr

Tim Allen

Thank you!

placement

2 Samstag, den 30. August 2008 um 08:49 Uhr

A, Berger

Hi Tim!

Absolute placement, as used in my scripts, is a leftover from about 2001 when they have been created. I just updated the panorama-script to work without it and I will proceed with this one.
If you want to use the script placed within an inline-frame anyway, i would have a look at www.selfhtml.org. If you have still problems after reading there - let me know.

greets
Andreas Berger

slide show placement

1 Mittwoch, den 27. August 2008 um 04:06 Uhr

Tim Allen

Hello,

I just downloaded your slideshow script, and it is working very well. Thank you for sharing this script. I would like to place the slideshow inside a div tag or somehow nest it within the layout of the site instead of making the placement set according to the entire page. My site is all contained within one div tag so that is centers itself depending on the size of the browser window. As it is now, the rest of my size moves, but the slide show stays in the same place.

I see on your site you addressed this with an inline frame. Can you point me in the right direction to learn more about using an inline frame? is it an html element or a java element? If you can simply explain to me how you used the inline frame on your site, I think I could figure out the rest.

Thanks!