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:
DateiZuletzt bearbeitet
Diese Datei herunterladen (bretteleben.de.slideshow.20100412.zip) bretteleben.de.slideshow.20100412.zip2010-04-12
Zuletzt aktualisiert am Montag, den 12. April 2010 um 21:23 Uhr
 
Kommentare (30)
Skript funktioniert nicht in Firefox 12 (mac)
30 Mittwoch, den 25. April 2012 um 17:51 Uhr
Christian Oberbauer

Hallo !

Finde Ihr Script toll. Gibt es einen Grund, warum es in Firefox 11 und jetzt 12 auf dem Mac nicht funktioniert ?

der Firebug zeigt einen "Fehler":
er gibt zu der Zeile 86 (siehe fett) die Meldung aus: pnext.style.removeAttribute is not a function

try{pnext.style.removeAttribute("filter");} catch(err){}

Danke
Christian

@Christian Oberbauer
Mittwoch, den 25. April 2012 um 20:16 Uhr
A. Berger

Hallo Christian!

Aus dem Stegreif kann ich das nicht klären, da ich keinen Mac zur Hand habe. Ich werde mich aber schlau machen.
Inzwischen können Sie die Zeile getrost auskommentieren. Sie soll nur sicherstellen, dass im Internet Explorer bei wirklich schwarzen Stellen im Bild keine weißen Fragmente auftreten (ein IE-Problem). Die Slideshow funktioniert aber tadellos.

Gruß
Andreas

Bilderverlinken ....
29 Mittwoch, den 25. April 2012 um 16:28 Uhr
N.Mayer

Hi,

wäre es noch möglich den einzelnen Bildern in der Slideshow entsprechende Links zuzuweisen ?

@N.Mayer
Mittwoch, den 25. April 2012 um 19:44 Uhr
A. Berger

Hallo N.Mayer!

Ja, natürlich. Ich bin nur nie dazu gekommen. Wenn Du aber Google mit "javascript slideshow linked images" fütterst, dann wirst Du mit Scripts erschlagen. :)

Gruß
Andreas

Übergänge beim manuellen umschalten einbauen
28 Dienstag, den 24. April 2012 um 15:12 Uhr
Adam N.

Hallo,

erstmal vielen Dank für die Bereitstellung dieses tollen Skriptes. Genau das habe ich gesucht. Ich hätte nur noch zwei Fragen dazu. Ist es möglich auch beim manuellen umschalten der Bilder einen Übergang einzubauen? Und, kann man die Slideshow automatisch beim Seitenaufruf starten lassen?
Vielen Dank!

Beste Grüße,
Adam

@Adam N.
Dienstag, den 24. April 2012 um 20:19 Uhr
A. Berger

Hallo Adam!

Ja, natürlich. Das Script ist unter der GPL lizensiert, das bedeutet, Du kannst es modifizieren wie Du möchtest (solange Du den Vorgaben der GPL folgst :)).

Zu Deiner zweiten Frage, um die Slideshow automatisch beim Seitenaufruf zu starten (wie das ja auch hier passiert) setz die Variable "def_startwhen" im Script auf "y".

Gruß
Andreas

Pause?
27 Samstag, den 21. April 2012 um 04:39 Uhr
Barbara Boll

Hallo Andreas!

Vielen Dank für das Script und die Erklärungen. Trotz völliger Javascript-Unwissenheit hat der Einbau samt Variationen auf 2 verschiedenen Seiten wunderbar geklappt.
Ich würde gerne noch eine Pausenfunktion hinzufügen: entweder onClick (auf das aktuelle Bild, weil ich keine Kontrollbuttons verwenden möchte) oder bei hover. Google hat einige Lösungen in jQuery ausgespuckt, aber die Frage ist, welche am elegantesten zu bretteleben passt. :)

Lg
Barbara

@Barbara Boll
Sonntag, den 22. April 2012 um 09:39 Uhr
A. Berger

Hallo Barbara!

Am elegantesten wäre es, wenn Du nicht extra ein komplettes Framework wie jQuery bemühst sondern die Funktionen zum Stoppen/Starten, die ja ohnehin im Script vorhanden sind, von den onClick-Events der Buttons auf einen onMouseover und onMouseout Event des DIVs der Slideshow umbiegst.

Gruß
Andreas

Z-Index
26 Freitag, den 20. April 2012 um 21:24 Uhr
bernhard

Hallo

Ist es möglich den z index des divs slideshow per klick zum ändern. möchte gerne das die slideshow über einen layer div eingeblendet und ausgeblendet werden kann.

@bernhard
Freitag, den 20. April 2012 um 22:17 Uhr
A. Berger

Hallo bernhard!

Um einen Layer über der Slideshow aus-/einzublenden muss er einen Z-Index haben, der höher ist, als die von der Slideshow verwendeten (also mindestens 3) und der Layer muss (damit das auch im Internet Explorer funktioniert) das CSS Attribut "position" (entweder "absolute" oder "relative") gesetzt haben.

Den zIndex der Slideshow zu ändern ist natürlich auch möglich, das Script ist GPL-lizensiert, man kann also nach Lust und Laune umbauen. Einfacher ist aber sicher die erste Variante, da der zIndex den einzelnen Bildern im Ablauf der Slideshow immer wieder neu zugewiesen wird.

Gruß
Andreas

slideshow sichtbarkeitsproblem
25 Freitag, den 20. April 2012 um 21:11 Uhr
burni

Hat jemand eine Idee warum sich die Slideshow nicht via layer div ausblenden lässt. egal was ich mache sie liegt immer im vordergrund.

Super script........vieeeeelllllleeeeennnnn DANK!
24 Sonntag, den 15. April 2012 um 13:40 Uhr
Andreas T.

Sehr großes Lob und besten dank, habe viel gesucht  um so etwas zu finden, denn überall fehlt eine vernünftige Beschreibung so wie sie hier vorhanden ist!!! :)

Gruß
Andreas T.

slideshow
23 Donnerstag, den 01. März 2012 um 21:00 Uhr
Beat Rüedi

soeben eingebaut (ruka.ch/wir) - herzlichen dank

Hilfe, Meine Slideshow schläft ein :-(((
22 Samstag, den 07. Januar 2012 um 12:38 Uhr
tommy

Hallo

Supi Script
Kann es sein das wenn ich größere Bilder (> 80kb) in die Slideshow packe,  die Slideshow dann ins stocken gerät oder mache ich etwas falsch.
Bei kleineren Bildern hab ich keine Probleme.

Gruß aus Berlin

@tommy
Mittwoch, den 11. Januar 2012 um 13:34 Uhr
A. Berger

Hallo Tommy!


Naja, Du könntest den Wert, den Du beim Parameter var def_steps gesetzt hast reduzieren. Das vermindert die Prozessorlast.

Gruß
Andreas


 

Verzeichnis lesen
21 Dienstag, den 06. Dezember 2011 um 12:58 Uhr
Havoc

Hi, wie bekomme ich es hin, dass er aus dem  Bilderverzeichnis alles Automatisch ausliest und einfügt? sind ca. 100bilder

Bei Joomla ging es ja

@Havoc
Dienstag, den 06. Dezember 2011 um 22:15 Uhr
A. Berger

Hallo Havoc!

Nachdem JavaScript als client-seitige Scriptsprache keinen Zugriff auf das Dateisystem am Server hat, könntest Du das z.B. über PHP lösen - so wie Joomla! das tut.

Gruß
Andreas

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

bretteleben.de

Add to circles

Wer ist online
Wir haben 58 Gäste online