Schicke Slideshows in JavaScript umgesetzt gibt es zur Genüge - dito als Plugins für Frameworks wie MooTools und jQuery. Auf dem freien ...

Schicke Slideshows in JavaScript umgesetzt gibt es zur Genüge – dito als Plugins für Frameworks wie MooTools und jQuery. Auf dem freien Markt der jQuery-Software existieren dutzende Entwicklungen – von einfach bis extravagant, um von der Natur statische Bilder effektvoll in Bewegung zu bringen. Bis dato mangelte es bei jQuery an einer Lösung für eine Art Bilderplayer: Intro, Play, Pause, Vor, Zurück, Stop. Eigenentwicklung: Schlanker und eleganter Bilderplayer auf jQuery-Basis.

Vorgeschichte und Zielsetzung der Entwicklung
Für das WordPress-SEO Plugin habe ich nach einer Möglichkeit gefahndet, eine Reihe von Bildern in Form einer Slideshow abspielen zu lassen. Die zurzeit verfügbaren jQuery-Erweiterungen sind zwar vielfältig was die Anzahl an möglichen Effekten angeht, entsprachen den Anforderungen allerdings nicht gänzlich. Das von mir gestellte Ziel:

1. Die Slideshow startet nicht unverzüglich nach dem Laden der Webseite. Der Besucher sieht zunächst eine Intro-Grafik mit einleitenden Informationen zur anstehenden Diashow oder einfach nur das Unternehmenslogo. Erst der Klick auf die Schaltfläche Play startet die eigentliche Bewegung der Grafiken.
2. Während der Präsentation kann der Ablauf gestoppt und wieder fortgesetzt werden. Im Kontrollpanel positionierte Pfeilelemente erlauben eine Navigation durch einzelne Slides.
3. Jedes Slide besteht nicht nur aus einem primären Bild, auch Zusatzinformationen in Textform sollen möglichst geschmackvoll dargestellt werden.
4. Beim Erreichen des letzten Slide wird die Bildershow automatisch gestoppt. Der Player wird in seine Anfangsposition versetzt: Kontrollelemente sind eingeblendet und laden den Betrachter zum wiederholten Ansehen des “Clips” ein – ganz gleich, ob automatisch per Klick auf Play oder manuell mit Pfeilen.

Da auf zahlreichen Kundenprojekten das jQuery Cycle Plugin sich als stabile und durchdachte JavaScript-Bibliothek für stillvolle Slideshows bewiesen hat, habe ich mir vorgenommen eine Erweiterung für das sehr modular aufgebaute Plugin zu entwickeln, die meinen Ansprüchen gerecht wird.

Das Ergebnis kann sich optisch wie auch technisch sehen lassen. Den fertigen JavaScript-Player stelle ich nachfolgend frei zur Verfügung. Im ZIP-Archiv befindet sich eine lokal funktionierende Bildershow mit oben gestellten Anforderungspunkten. Die Referenz der unterstützten Optionen im jQuery Cycle Plugin hilft bei der Implementierung oder Anpassung des Funktionsaufrufs.

Somit steht einer auf Bildern basierenden Präsentation oder Anleitung nichts mehr im Weg.

Features

• Beispiel beinhaltet HTML-, CSS- und JavaScript-Dateien
• Zusammen mit dem jQuery Cycle Plugin unter 5 kB
• Dokumentierter Code
• Mögliche Modifizierung der Effekte
• Getestet auf IE 7, Firefox 3, Opera 9 und Safari 3