Der eine oder andere mag sich vielleicht noch daran erinnern, dass ich vor einigen Monaten eine JavaScript SlideShow auf jQuery Basis programmiert habe. Genau diese SlideShow ist mittlerweile ausgewachsen und hat eine eigene Webseite bekommen, auf der ihr euch auch einmal die Demo ansehen könnt.
Ich möchte die Gelegenheit nutzen und euch die SlideShow mit allen Funktionen noch einmal vorführen. Da ich das Script unter GNU GPL und MIT Lizenz veröffentlicht habe, kann sich jeder Interessierte das Script ganz einfach an die eigenen Bedürfnisse anpassen.
Abgesehen von den Lizenzrechtlichen Freiheiten bietet das Script ein hohes Maß an Anpassungsfähigkeit und Individualisierungsmöglichkeiten mittels der Optionen und CSS.
Wie wird die SlideShow eingebunden?
Der Einbau ist relativ einfach und kann sehr individuell gehalten werden, denn es besteht nicht die Notwendigkeit bestimmte Tags zu verwenden, sondern nur eine bestimmte Struktur einzuhalten.
In dem Beispiel steht das * für ein beliebiges HTML-Element:
Subelement*>
Subelement*>
*>
Um das ganze ein bisschen zu verdeutlichen, sind hier ein paar Beispiel-Strukturen mit verschiedenen Tags:
Einzelbilder in einem Div-Container
Bilder in Liste (ul)
Bilder in Container (div)
Einbinden der JavaScript Funktionen
Da das simple FadeSlideShow Plugin auf jQuery basiert ist natürlich eine der Vorraussetzungen, dass die jQuery auch eingebunden ist. Danach dann die entsprechende JavaScript Datei des Plugins.
Wenn diese beiden JavaScript Dateien eingebunden sind, muss nur noch die Funktion gestartet werden:
jQuery(document).ready(function(){ // Dom Ready Funktion von jQuery
jQuery('#slideshow').fadeSlideShow(); // Start der simple FadeSlideShow
});
Mit diesem Code wird die SlideShow mit dem Element ID „#slideshow“ gestartet.
Anpassen des Scriptes mittels Optionen
Die simple FadeSlideShow bietet verschiedene Optionen um sie an die Bedürfnisse des Verwenders anzupassen. Folgende Optionen können eingestellt werden (bei den aktuellen Werten handelt es sich um die Standardwerte):
width: 640, // Weite der SlideShow
height: 480, // Höhe der Slideshow
speed: 'slow', // Animationsgeschwindigkeit
interval: 3000, // Zeit zwischen Bildwechsel 1000 = 1 Sekunde
PlayPauseElement: 'fssPlayPause', // ID für Play / Pause Element
PlayText: 'Play', // Play Text
PauseText: 'Pause', // Pause Text
NextElement: 'fssNext', // ID für den weiter Button
NextElementText: 'Next >', // Text für den weiter Button
PrevElement: 'fssPrev', // ID für den zurück Button
PrevElementText: '
Wichtig: Die Elemente PlayPauseElement, NextElement, PrevElement und ListElement werden automatisch von der SlideShow generiert, wenn ihr diese Elemente selber anlegen wollt, dann setzt den Wert in den Optionen auf false.
Wie werden die Optionen geändert
Die Standard-Optinen können ganz einfach im Funktionsaufruf der simple FadeSlideShow geändert werden.
Hier ein Beispiel um die Weite und Höhe zu ändern:
jQuery(document).ready(function(){
jQuery('#slideshow').fadeSlideShow({
width: 800,
height: 600
});
});
SlideShow mit CSS stylen
Falls nicht in den Optionen geändert, sind dies die Standard-CSS Selektoren für die Elemente der SlideShow.
#fssPrev // ID vom Zurück Button
#fssNext // ID vom Weiter Button
#fssPlayPause // ID vom Play / Pause Element
#fssList // ID der Steuerungs-Liste
.fssLi(X) // Klasse der LI Elemente innerhalb der #fssList - x ist eine fortlaufende Nummer
.fssActive // Klasse für das aktive Element innerhalb der #fssList
Ich wünsche euch viel Spaß mit der SlideShow und hoffe, dass ihr soweit alles verstanden habt.
Die offizielle Webseite der SlideShow findet ihr hier: www.simplefadeslideshow.com