Beispiel einer Javascript Slideshow

Ich möchte euch einmal kurz eine Einweisung zu einem kleinen Javascript geben, welches wirklich sehr einfache und hübsche Überblendeffekte für Fotos ermöglicht.

Ich stand letztens vor dem “Problem” das ein Kunde eine einfache Slideshow als Designelement in seine neue Webseite einbinden wollte. Da ich nicht der erfahrenste in Sachen Flash bin (aus gutem Grund) schaute ich mich nach einer Lösung für JavaScript um und bin nach einigem Suchen auch auf die perfekte Lösung gestoßen.

Das kleine JavaScript Image Cross Fader Redux von Steve Chipman (der übrigens noch viele andere tolle JScripts auf seiner Webseite beheimatet) ist einfach in der Handhabung und leicht im Quelltext. Das Script bringt nach einer Komprimierung keine 2Kb mehr auf die Waage und bringt die Möglichkeit mit, beliebig viele Bilder in einer Art Slideshow in einander übergehen zu lassen.

Das ganze kommt natürlich unobtrusive daher, sprich: Ihr müsst kaum etwas am Quelltext ändern, die Effekte werden durch eine DOM-Manipulation eingebunden.

Im Klartext könnte euer Quelltext dafür in etwa so aussehen…

<div id="imageContainer">
	<img src="bild1.jpg" alt="Einbindung 1. Bild" />
	<img src="bild2.jpg" alt="Einbindung 2. Bild" />
	<img src="bild3.jpg" alt="Einbindung 3. Bild" />
	<img src="bild4.jpg" alt="Einbindung 1. Bild" />
</div>

Alle Bilder die sich im DIV mit der ID imageContainter befinden werden in diesem Beispiel nacheinander überblendet. Das Startbild taucht also auch als erstes im Quelltext auf.

Um die Geschwindigkeit der Überblendungen zu beeinflussen ist es jedoch nötig ein wenig im Javascript zu manipulieren.

Um die Anzeigedauer der einzelnen Bilder zu bestimmen müssen die Werte setTimeout(so_xfade,1000); in Zeile 34 und 56 modifiziert werden, je höher der Wert desto länger bleiben die Bilder auf der Bühne.

Um die Zeit für den Blendeffekt zu regulieren müssen die Variablen cOpacity- und cOpacity+ angepasst werden, je höher der Wert hier ist, desto länger braucht es bis sich das neue Bild komplett eingeblendet hat. Ihr solltet jedoch beiden Variablen die selben Werte zuweisen, da ansonsten eines der Bilder zu früh bzw. zu spät kommt oder geht.

Was nun wenn kein JavaScript beim Besucher aktiviert ist?

Nun, in diesem Fall würden die Bilder ganz normal untereinander bzw. nebeneinander ausgegeben werden. Für Slideshows im Contentbereich mag dies ja eine gute Lösung sein, doch als animierter Webseitenheader wäre das doch sehr unschön. Um diesem Problem aus dem Weg zu gehen sollte man vorsichtshalber im CSS der ID imageContainer noch eine feste Breite und Höhe sowie ein overflow:hidden; mit auf den Weg geben. In diesem Fall würde bei deaktiviertem JavaScript einfach nur das erste Bild der Slideshow ausgegeben werden.

So, das war schon eindeutig zuviel Text zu solch einem kleinen Script :-)



Kommentare zum Thema Zur schicken JS-Slideshow in 5 Minuten:

1 | typ.o schrieb am 08.05.2007 um 06:02
Gravatar dieses Kommentators

schnuckelig. was mich bei dieser und auch bei allen flash – diashows vom einsatz abgehalten hat: das überblenden geht subjektiv “ruckelig”, es scheinen nur wenige (16?) stufen benutzt zu werden. ist das zwingend so?

2 | Christian schrieb am 08.05.2007 um 19:13
Gravatar dieses Kommentators

Also das überblenden wird komischerweise ruckeliger, je länger der Überblendeffekt andauert. Will man das die Animation nur 0.8 Sekunden dauert sieht man denke ich nichts, bei längeren Effektzeiten kommt mir das aber auch so vor.

Das kann aber auch gut am Browser liegen! Der Firefox hat eine wirklich lahme Javascript Engine, das stelle ich in den letzten Tagen immer häufiger fest. Mache ich mit jQuery z.B. ein Bounce(), so sieht das im IE7 komplett flüssig aus, im Firefox hingegen ruckelt es sich total einen ab, aber das soll sich ja angeblich beim Firefox 3 ändern…

3 | Oliver schrieb am 26.03.2008 um 12:48
Gravatar dieses Kommentators

Hi.
Habe mit diesem Script ein kleines Problem. Soweit funktioniert es, aber ich möchte gerne mehr, wie 1 Container. Sprich mehrere kleine Felder nebeneinander, wo die einzelnen Images der jeweiligen Container faden. Da ich die ID ja nur 1x verwenden kann, weiss ich nich wirklich, wie man das realisieren kann.

Hättest du vielleicht eine Idee????

Vielen Dank im voraus.

Mit freundlichem Gruß

Oliver Natschke

4 | BastianBalthasarBux schrieb am 30.04.2008 um 16:48
Gravatar dieses Kommentators

@oliver: wie wärs mit einer zweiten ID? ;)
Und den Aufruf: so_init() würde ich in eine progressive onload schleife packen.
Und die IDs der Elemente sollte man noch schnell in ein array packen, das man rekursiv durchgehen kann.
etc pp
Trotzdem ganz nettes script. Einfach zu bändigen als z.b. die Assets von Mootools.

5 | Liane Strauch schrieb am 21.01.2009 um 15:27
Gravatar dieses Kommentators

Hallo, habe hier das schöne Script gefunden und es geht, ich habe nur ein Problem.: Die bilder werden zuerst alle aufgebaut und bauen sich dann nacheinander erst ab und dann sieht man immer zwei Bilder, die sich abwechseln. Wisst Ihr wo hier der Haken sein könnte?

Vielen Dank im Voraus
Liane

6 | Devilor schrieb am 22.03.2009 um 16:43
Gravatar dieses Kommentators

Genau das Problem habe ich auch! aber hier darf man ja leider keine Links Posten! sonst hätte ich mal einen Link gepostet wo man den fehler sieht :(

7 | Susii Sorglos schrieb am 14.04.2009 um 12:11
Gravatar dieses Kommentators

<p>Das Problem verschwindet, sobald man die img in absoluter Position angibt, wie im Script vorgegeben. </p>

<p>#imageContainer img { <br />
display:none; <br />
position:absolute; <br />
top:10px; left: 10px; <br />
}</p>

8 | Fabian schrieb am 20.05.2009 um 09:54
Gravatar dieses Kommentators

^^ Wird in dem Fall jedes img innerhalb des div Elements mit der ID imageContainer per CSS auf “display:none” gesetzt – so wird jedoch bei deaktiviertem javaScript gar kein Bild angezeigt. Gibts es da eine Lösung, die das Problem behebt?

9 | Astra schrieb am 11.09.2009 um 02:01
Gravatar dieses Kommentators

Hallo,
ich bin über diese Seite gestolpert und erst einmal ein Kompliment! Gefällt mir!

Bei dem Skript, dachte ich, das ist DIE Lösung für mein Problem – eine valide Diashow.
Ich habe alles so eingebunden, wie beschrieben, aber ich bekomme die Bilder nur untereinander dargestellt – trotz fester Größe und hidden.
Warum funktioniert das nicht bei mir?

10 | Uwe schrieb am 06.10.2009 um 09:23
Gravatar dieses Kommentators

Hi,
ich erhalte sowohl im IE7 als auch im Fox3 immer nur EIN Bild?
Irgendetwas ist hier faul.

11 | hobby-prog schrieb am 10.08.2010 um 11:53
Gravatar dieses Kommentators

Hallo, tolle Sache das. Darf das Script auch in kommerziellen Seiten eingebunden werden?

Gruß Hobby-Prog

Kommentar-Feed für diesen Artikel


Kommentarfunktion für diesen Artikel geschlossen.



Blogsuche

RSS-Feeds

Plaste & Plastik

plasteundplastik.de - Das Geocaching-Weblog

Die Kategorien


Netz-Fundstücke


Meta / Propaganda