DOM-Scripting-Slideshow

Für ein Projekt habe ich diese wunderbare JavaScript-Diashow von S.G. Chipman ein wenig modifiziert.

Vorteile der Slideshow:

Eine beliebige Anzahl von Bildern kann als Slideshow eingebaut werden.
Es werden anfangs nur zwei Bilder vorausgeladen. Alle folgenden werden nach und nach dazu geladen (spart Ladezeiten).
Ist JavaScript nicht aktiviert, wird nur das erste Bild angezeigt, nicht wie im Original-Script alle Bilder untereinander. So kann die Slideshow in eine Website z.B. im Header integriert werden und sieht dann auch noch gut aus, wenn JavaScript deaktiviert ist.
Die Slideshow ist in unaufdringlichem JavaScript geschrieben, was sie sehr flexibel macht.
Der (X)HTML-Quellcode ist standardkonform und semantisch korrekt aufgebaut.

Slideshow einbinden

Bilder für die Slideshow erstellen und nummeriert mit Endung 001.jpg bis 00x.jpg in einem Ordner auf dem Webserver speichern.

z.B. http://www.meinedomain.de/slideshow/image-001.jpg usw.

Erstes Bild der Slideshow mit class="start" in div-Container mit ID “slideshow” mit folgendem Code in die Seite einfügen:

<div id="slideshow">
<img class="start" src="www.meinedomain.de/slideshow/image-001.jpg" />
</div>

Slideshow-JavaScript-Datei downloaden »

JavaScript-Datei anpassen:

Die folgenden Variablen am Anfang des Scriptes nach eigenen Bedürfnissen definieren:

bilderAnzahl=5;
bilderPfad="http://www.meinedomain.de/slideshow/image-";
geschwindigkeit=3000;

Für bilderAnzahl die Anzahl der Slideshow-Bilder angeben.
Bei bilderPfad den absoluten Pfad zu den Slideshow-Bildern angeben und zwar bis zu dem Zeichen, welches vor der Nummerierung 00x.jpg steht (s. Beispiel oben).
Für geschwindigkeit die Zeit zwischen den Überblendungen in Millisekunden angeben, also für 1 Sekunde 1000.

JavaScript-Datei einbinden:

<script type="text/javascript" src="http://www.meinedomain.de/scripte/slideshow.js"></script>

Folgendes CSS in die Stylesheet-Datei der Website einbinden:

/* SLIDESHOW */
#slideshow {
 height:100px; /* hier Hoehe der Slideshow-Bilder angeben */
 position:relative;
}
#slideshow img {
 display:none;
 position:absolute;
 top:0; left:0;
}
#slideshow img.start {
 display:block;
}

Slideshow bewundern!

PS:
Das Script funktioniert bei mir in allen getesteten Browsern.
Falls es das irgendwo nicht tut, würde ich mich über eine Nachricht freuen!

Kommentare & Trackbacks

Kommentar von mzeecedric:

Sehr schön, vielen Dank für das Tutorial. Ist gebookmarkt und wird demnächst mal getestet!

29. Juni 2006 um 15:14
Kommentar von Agnes:

Hallo Franziska, sehr schönes Script, aber bei mir hüpft die Slideshow so seltsam, das neue Bild lädt unter dem alten und wenn das alte verschwindet dann hüpft das neue nach oben. Oder war das so gewollt? Ich hab mal ein Screenshot gemacht wo das eine verschwindet und das neue kommt:
img410.imageshack.us/img410/4839/zwischenablage017wq.jpg
Das lustige ist, dass während ich den Comment hier tippe, springt das Formularfeld immer auf und ab! Ich habe Firefox (1.5) und reload hilft auch nicht.
Grüße
Agnes

29. Juni 2006 um 17:01
Kommentar von mzeecedric:

@Agnes: bitte nicht so laut tippen, der monitor wackelt ja schon… ;-)

29. Juni 2006 um 18:28
Kommentar von Franziska:

Hallo Agnes,
hmm … das Problem hatte ich anfangs auch im IE.
Dort lag es an der CSS-Datei, welche die neuen Bilder nicht mit der CSS-Eigenschaft display:none; geladen hatte.
Hab das CSS nun aber eigentlich angepasst, so dass das Phänomen nicht mehr auftreten sollte …
Ich habe Firefox 1.5.0.4 und in dem funzt es prima. Welche Firefox-Version hast Du genau?
Versuch doch mal, den Cache zu leeren … vielleicht sieht Dein Browser ja noch die alte CSS-Datei??? Wenn nicht, dann meld Dich nochmal …
Danke :)

29. Juni 2006 um 18:30
Kommentar von Franziska:

@agnes: funzt denn das Original bei Dir? http://slayeroffice.com/code/imageCrossFade/xfade2.html

@mzeecedric: :))

29. Juni 2006 um 18:40
Kommentar von designdragon:

Schönes nützliches Script. Danke!

29. Juni 2006 um 21:32
Kommentar von Agnes:

Tatsächlich, lag am Cache. Sorry für die Aufruhr.
Grüße
Agnes

30. Juni 2006 um 15:18
Kommentar von Viktor:

Wirklich sehr schönes Script und vielen Dank für die “barrierefrei” Beschreibung wie man das Ganze sehr gut in die eigene Seite einbinden kann. :-)
Solche Blogs sollte man öfters finden… Kompliment! :-)

Viele Grüße
Viktor

3. Juli 2006 um 17:02
Kommentar von Uli Fetz:

Schönes Script, gefällt mir sehr gut. Ich habe es nun mit 11 pics ausprobiert, aber bei mir wird partout das zweite Bild nicht angezeigt. Ich kann machen was ich will, keine Chance. Woran kann das liegen??

15. Juli 2006 um 17:09
Kommentar von Franziska:

Hallo Uli,
freut mich, dass Dir mein Script gefällt!
Um Deine Frage zu beantworten, bräuchte ich ein wenig mehr Einblick in Dein Script, wie Du Deine Bilder benannt hast etc.
Es ist schwer, da eine Ferndiagnose zu stellen …
Viele Grüße
Franziska

15. Juli 2006 um 18:40
Kommentar von Wolfgang:

Hallo Franziska,
ich hab diese Seite auf einem Mac angeschaut und da funktioniert das Script nicht. Der Browser war Safari mit aktiviertem Javascript. Das Original läuft allerdings einwandfrei. Woran könnte das liegen? Hast Du schon einen Test auf OS X/Safari gemacht? Ansonsten sehr schönes Script! Danke!

Viele Grüsse
Wolfgang

8. August 2006 um 11:37
Kommentar von Franziska:

Hallo Wolfgang,
danke für den Hinweis!
leider hab ich keinen Mac zum testen zur Verfügung …
So kann ich den Fehler schwer finden …
Werde mich aber bei Gelegenheit mal damit beschäftigen.

Grüße von
Franziska

8. August 2006 um 14:57
Kommentar von Franz:

Bin auf der Suche nach einer Slideshow, die auch mit Firefox geht auf diese schöne Seite gestoßen. Ich wäre dankbar für einen Tipp, wie die Slideshow horizontal zentriert angezeigt werden kann.

Danke
Franz

14. Oktober 2006 um 14:09
Kommentar von Franziska:

Hmm …
den Div-Container #slideshow, der alles beinhaltet, kann man genauso positionieren, wie alle anderen CSS-Elemente.
Bei der Zentrierungsfrage hilft Dir sicher das hier weiter: http://www.thestyleworks.de/tut-art/centerblock.shtml

Alles Gute!
Franziska

14. Oktober 2006 um 19:17
Kommentar von Norbert:

ist wirklich alles sehr schön.
Aber wie kann man die Diashow in einer Tabelle positionieren, dass diese immer am richtigen Platz erscheint? und nicht mit den CSS-Einstellungen, den dann sieht man bie jeder Bildschirmauflösiung das Bild irgenwo andres.

Besten Dank

2. November 2006 um 16:30
Kommentar von Franziska:

Hallo Norbert,
die CSS-Angaben sind eigentlich nur für die Funktionalität der Bildergalerie wichtig.
Du solltest das
einfach in eine Tabelle packen oder es per CSS beliebig positionieren können.

LG
Franziska

2. November 2006 um 19:46
Kommentar von Olaf:

Hallo Franziska,
wirklich tolles script.
Habe es gleich eingebaut und funktioniert super in Firefox2.0 und IE7.
Info: Beim Bildwechsel sah man jedesmal den (Bild-)Hintergrund kurz durchscheinen. Habe dann als Lösung einfach hinter die slideshow einen (Farb-)Hintergrund gelegt.
Ergebnis siehe bei http://www.okerfahrten.de .
Grüße
Olaf

15. Dezember 2006 um 15:44
Kommentar von Franziska:

Hallo Olaf,

freut mich, dass Du Freude hast mit dem Script. Sieht auch super aus auf Deiner Seite!

LG
Franziska

15. Dezember 2006 um 18:47
Kommentar von Benjamin:

Hallo! Nach langem Suchen, anscheinend auf ein super Script gestoßen. Ich möchte dieses einbinden und habe eine Frage: Kann ich anstatt die Bilder auf dem Server abzulegen auch einen HTML-Code hinterlegen, sodass das script externe Bilder lädt? Vielen Dank vorab!!!

2. Januar 2007 um 14:04
Kommentar von Franziska:

Hallo Benjamin,
wenn Du Dich ein bisschen mit coden auskennst, ist das sicher möglich. Es müssten einige Stellen im Script angepasst werden (Bild-URLs evtl. als Array verfügbar machen [nur so als Idee] … ).
Allerdings sollte man eher keine externen Bilder in seine Webseite einbinden.

2. Januar 2007 um 16:53
Kommentar von Evelyn:

Tolles Script, bin gerade am Überlegen, wo ich es am Besten bei mir einbaue.

4. Januar 2007 um 21:40
Kommentar von oliver schnaus:

hallo!

habe ursprünglich dieses script, das abhängig von der bildschirmauflösung ein bild generiert.
===================
1024)

{
breite = 960;
hoehe = 550;
}

else

{
breite = 488;
hoehe = 300;
}

document.write(”);

//–>

==================

kann ich das mit der diashow kombinieren, damit auch hier die darstellung abhängig von der bildschirmauflösung erfolgt?

vielen dank, gruß olli

27. Februar 2007 um 14:45
Kommentar von olli:

und jetzt noch was: die neuen bilder, die vorgeladen werden, erscheinen immer unter dem aktuell dargestellten bild und rutschen dann nach oben.
anfängerfehler???

lg olli

27. Februar 2007 um 19:28
Kommentar von olli:

mein frage von vorhin ist weg?!

folgendes problem:

ich habe bisher ein script, dass ein images abhängig von der bildschirmauflösung generiert:

1024)

{
breite = 960;
hoehe = 550;
}

else

{
breite = 488;
hoehe = 300;
}

document.write(”);

//–>

kann man diese funktion in irgendeiner form in die diashow einbinden???

danke, olli

27. Februar 2007 um 19:32
Kommentar von Marcel:

Hallo.
Erstmal dickes Lob von mir. Echt tolles Script.
Wenn ich nun jedes einzelne Bild aus der Slideshow extern verlinken will, was muss ich da verändern? Jedes Bild einen anderen Link der sich in einem neuen Fenster öffnet.
Dank schonmal…

14. März 2007 um 03:55
Kommentar von Fabian:

Hallo Franziska

Vielen Dank für dieses sehr gute Script. Ich muss jedoch leider auch bestätigen, dass das Script unter Safari nicht läuft. Mir fehlt leider die Zeit zur Fehlersuche und ein ausgewiesener Javascript-Profi bin ich auch nicht grade. Wenn Du Interesse hast, könnte ich dir jedoch insofern behilflich sein, dass du mir das jeweils geränderte Script zuschickst und ich teste, ob es unter Mac OS X bzw. Safari funktioniert. Nur so als Vorschlag … Gruss

22. März 2007 um 00:40
Kommentar von Sarah:

Hallo zusammen,

das Skript funktioniert super bei mir in Forefox und Opera, nur der IE streikt leider. Ich habe nichts verändert bis auf die Positionierung des div-Elements auf der Seite. Vom IE bekomme ich immer eine Meldung “Fehler auf der Seite, das Objekt unterstützt diese Eigeneschaft oder Methode nicht.” an einer Stelle an der nur Leerzeichen im Quellcode stehen. Gibt es jemanden mit dem gleichen Problem oder kann mir sagen woran es liegt?
URL: http://taktischer-kleinbus.de/kleinbus/ocean/index.html

Gruß

31. März 2007 um 12:45
Kommentar von Sarah:

danke. hat sich schon erledigt.

31. März 2007 um 20:34
Kommentar von Michi:

hallo,
hab das skript ausprobiert, aber leider wird immer nur das erste Bild angezeigt und die restlichen erscheinen nie.
an was kann das liegen? habe es so eingebunden wie oben beschrieben.
kann mir da jemand helfen?
vielen dank
michi

13. April 2007 um 12:38
Kommentar von Uta Gau:

Hallo Michi, auch ich habe einige Zeit gebraucht - Fehler gemacht, irgendwas zuviel oder zuwenig getan, aber es funktioniert und sieht in der 16:9 Optik wirklich Klasse aus.
Um Deinen Fehler zu finden, müsste man in das Innenleben Deiner Seite schauen, aus der Ferne geht das unmöglich.

Uta

19. April 2007 um 15:45
Kommentar von Fabian:

Okay, das Problem mit Safari scheint gelöst zu sein - dank der prompten Hilfe eines Mitglieds von xhtmlforum.de. Damit das Script auch unter Safari funktioniert, müssen folgende Änderungen im Code gemacht werden.
————————-
Zeile 27:

bilder[1] = new Image();

ersetzen durch

bilder[1] = document.createElement(”img”);
————————-
Zeile 74:

bilder[aktuell+2] = new Image();

ersetzen durch

bilder[aktuell+2] = document.createElement(”img”);
————————-

Danach sollte die Slideshow auch unter Safari einwandfrei laufen.

20. Mai 2007 um 23:08
Kommentar von domag:

Hallo,

vielen Dank für dieses tolle Script. Es gibt leider nur ein Problem für mich.
Evtl. Anfängerfehler…?
Das funktioniert nur auf einer Seite. Ich möchte aber genau den gleichen 2-Bilder-Fade auf mehren Seiten einsetzten. Was könnte ich denn noch anderes machen als den Code von der funtioniernden Seite einfach zu kopieren. Ich verstehe das leider nicht. Kann mir jemand helfen?
Gruß
domag

3. Juni 2007 um 01:54
Kommentar von domag:

Ich bin ein Depp! Mein Kommentar kann wieder gelöscht werden. Hatte einfach nur vergessen auch das Script mit in jede Seite einzubauen…:)

Funtioniert jetzt alles mit IE und Firefox. Safari weiss ich nicht…

3. Juni 2007 um 02:02
Kommentar von Ben:

Super Script!!! Danke!! Hab ne Slideschogebastelt mit 82 bildern und es läuft top!!

http://www.danilo-pockrandt.de

1. Juli 2007 um 21:08
Kommentar von Bäeribeeri:

Nicht schlecht, das Skript! Ich habe unterhalb der Zeile 67 noch die Zeile:

obj.style.KHTMLOpacity = obj.xOpacity;

eingefügt. Nun läuft das Skript auch auf dem Konqueror und Safari

3. Juli 2007 um 15:01
Kommentar von Peter Reifegerste:

Hallo.
Schönes Script, allerdings öffnet sich bei mir das 1. Bild nicht. Bitte schau doch mal nach. Es befindet sich alles im Ordner “slideshow”. Danke:

http://www.mr-ibiza.de/slideshow/slideshow1.html

Gruss Peter

8. Juli 2007 um 16:25
Kommentar von david:

Hallo Franziska, könntest du dein tolles script noch um ein random funktion erweitern? So das die bilder in zufällige reinfolge erscheinen?

11. Juli 2007 um 20:04
Kommentar von sascha:

hallo franziska,
ist es eigentlich möglich dieses diashow öffters auf einer seite, mit 2 verschiedenen start u. folgebilder einzubinden?

lg, sascha

18. Oktober 2007 um 08:42
Kommentar von domag:

Hallo, gibt es eine Möglichkeit die Bilder in zuflliger Reihenfolge anzeigen zu lassen? Random? Das fände ich noch sehr Abwechslungsreich, bzw. ein echtes Plus.
Vielen Dank für eure Antwort.
Gruß
domag

4. November 2007 um 12:05
Kommentar von Ed:

Hallo Franziska,

danke für das Script und die klasse Anleitung. Bin quasi Anfänger in HTML, CSS und JavaScript – aber ich hab’s geschafft: Die Slideshow läuft (übrigens mit den oben aufgeführten Anmerkungen auch in Safari).

Jetzt freue ich auf mehr Scripte und Anwendungen von Dir…

Liebe Grüße -
Ed

17. November 2007 um 17:07
Kommentar von Patrick:

Hi Franziska,
erstmal kompliment für dein Script. Genau das habe ich lange gesucht und nun endlich gefunden.
Ich weiß das du das Script auf freiwilliger Basis entwickelt hast und ich komme mir auch etwas unverschämt vor zu fragen aber ich mach es trotzdem mal:
Würdest du eventuell noch eine Lösung parat stellen die die Bilder in zufälliger Reihenfolge abspielt?
Das wäre dann für alle die was die Ihre Startseit etwas aufpeppen wollen so wie ich.
Ich hab auch schon gesehen das zwei andere User danach gefragt haben und es wäre doch ein schönes Weihnachtsgeschenk oder ;-)

Also ich hoffe du nimmst mir die Frage nicht übel.

Gruß
Patrick

10. Dezember 2007 um 19:14
Kommentar von Carl Steiner:

Ich finde es ebenfalls ein 1A Script, vor allem weil Kommentare enthalten sind wodurch es möglich ist diesen auch zu verstehen und nicht nur unwissend einzubauen.!

Unter http://www.alteradios.com/Tour/pics/world_tour/bike_at/bulgaria/7.htm
könnt Ihr euch das ansehen, wie ich das Script abgeändert habe. Einfach auf “start slideshow” klicken und es geht los!

Ich habe allerdings 2 div’s in Verwendung, weil ich nicht will das das Array Bilder[] ins unredliche ausufert. Daher ersetze ich das jeweilige Objekt um das zu verhindern. Ich habe noch nicht getestet ob es deshalb einen Überlauf geben könnte.

Als nächster plane ich eine solche Slideshow mit einer Random Funktion, ich melde mich dann wieder hier :D.

PS.: Tolle Infos auf der Seite weiter so!!!!

Da Carl
http://www.carl.at.nr

31. Dezember 2007 um 19:41
Kommentar von Carl Steiner:

Der vorherige Eintrag kann gelöscht werden!

Zumal das Array Bilder immer nur so groß wird wie Bilder im Verzeichnis vorhanden sind (bzw. was vorgegeben ist).

MfG

Da Carl

31. Dezember 2007 um 20:54
Kommentar von Stephan:

Hallo, super Script! Genial klein und effektiv.

In der Hoffnung, dass Franziska oder ein sonstiges As nochmal auf diese Seite schaut, habe ich eine Frage. Ich würde das Script gern auf einer Seite mehrmals einstellen, aber leider verhalten sich beide Slideshows etwas ungewöhnlich; und unterschiedlich ungewöhnlich in IE und Firefox. Hat jemand einen Tip parat? Meine e-Mail Adresse lautet: stephandunkel@hotmail.com

8. Januar 2008 um 04:54
Kommentar von humedia:

Also bei mir funktioniert das Script nicht nach der anleitung, ich gehe zunächst einmal davon aus, dass der lade-aufruft des javascripts im header passiert , jedenfalls muss das bei mir soweit geklappt haben, ich bekomme folgende Fehlermeldung und bin mir ziemlich sicher, korrekte pfade (also wie beschrieben) eingefügt zu haben: Die Fehlermeldung erscheint in folgender Zeile:
bild = d.getElementById(”slideshow”).getElementsByTagName(”img”);
dabei hat d.getElementById(”slideshow”) has no properties.

14. Februar 2008 um 20:27
Kommentar von Franziska:

Hast Du die Slideshow auch in einem div, das “slideshow” heißt?

15. Februar 2008 um 11:54
Kommentar von humedia:

hey, vielen dank für die schnelle Antwort anbei mal ne URL zum nachvollziehen ;-)

http://huelskamp.de/swa/slidetest.htm

15. Februar 2008 um 22:34
Kommentar von Franziska:

id=”slideshow”
class=”start”

Das istgleich muss nach ID und nach class stehen.

Franziska

16. Februar 2008 um 00:31
Kommentar von humedia:

hey, ich hab schon den monitor umarmt, auch wenn der mich manchmal ganz schön blind macht ;-) die letzten zeilen bitte aus dem protokoll löschen ;-)

super script, auch schön, im firebug zu bewundern, wie sich dynamisch die opacity werte ändern…

16. Februar 2008 um 01:20
Kommentar von Ralph Wörmke:

Hallo,

erstmal herzlichen Dank für das Script.
Ich habe es in meinem Testshop oberhalb des main_content laufen. Leider finde ich nicht heraus, wie ich die Anzeige zentrieren und wie ich wo einen Rahmen definieren kann.

Ich würde die Slideshow gerne im top-logo-Bereich des Shops laufen lassen, aber so, das sie mittig angezeigt wird und zu beiden Seiten noch das top_logo zu sehen ist.

Weis jemand wie ich hier vorgehen muß?

Für Hilfe wäre ich sehr dankbar, da ich seit 2 Tagen alles mögliche versuche, ohne Erfolg.
Ich muss nun also fragen.

Den Shop findet man hier:
http//www.morgengrün.de/teeshop. Ist noch eine Baustelle, deswegen die Verzeichnisangabe

Gruß

Ralph

28. Februar 2008 um 16:27
Kommentar von Franziska:

div id=”slideshow”
img class=”start” src=”www.meinedomain.de/slideshow/image-001.jpg”
div

Du musst das div “slideshow” horizontal mittig ausrichten. Siehe dazu meinen Beitrag http://die.netzspielwiese.de/blog/css/2006-03/inhalte-zentrieren-mit-css.

Gruß Franziska

28. Februar 2008 um 17:55
Kommentar von Ralph:

Hallo Franzika,

ich nochmal.
Die Slideshow hab ich jetzt dort zum Laufen gebracht, wo ich sie haben will.
Das Problem ist nur, daß die Bilder beim 2-ten Durchgang nur noch fast transparent erscheinen.
Welchen Fehler mache ich?

Gruß

Ralph

12. März 2008 um 16:02
Kommentar von Franziska:

Ich kann Deinen Fehler nicht nachvollziehen. Bei mir läuft alles super.

Franziska

12. März 2008 um 17:44
Kommentar von Fred:

Hallo Franziska!
Tolles Script, sowas suche ich schon länger. Ich habe ein paar Tage jetzt rumprobiert und es auch zum Laufen bekommen mit unterschiedlichen Resultaten. Firefox und Opera kein Problem, IE7 je nach Betriebssystem unterschiedlich, Maxthon (IE7 Aufsatz) Probleme und ich weiss nicht mehr weiter.
Die ersten zwei Bilder sind OK (11 gesamt), dann werden die dazwischen kleiner in der Höhe angezeigt, das letzte ist wieder OK. CSS Bildhöhe auch geändert, Cache der Browser gelöscht usw. IE7 auf Vista löppt, XP leider mit den beschriebenen Problemen bei mir auf zwei Rechnern. Hast du da eventuell eine Idee wo ich was falsch gemacht haben könnte?

1. April 2008 um 14:36
Kommentar von Martin Rieger:

Hallo Franziska,

nach langer Zeit habe ich endlich mal ein Script gefunden, welches ausgezeichnet in allen Browsern funktioniert. Bisher habe ich so einen Effekt in Flash gemacht, da ein bisher verwendetes Script nur bedingt einsetzbar war. Herzlichen Dank. Damit geht das viel einfacher und schneller.
Die Probleme wie Fred sie schildert, kann ich nicht bestätigen.
Ich habe das Script bei nahezu allen Variationen getestet.

24. Juli 2008 um 15:18