Beim Nivo Slider handelt es sich um eine umfangreiche Javascript Slideshow auf jQuery Basis. Der Nivo Slider hebt sich vor allem durch seine vielen wundervollen Effekte und Einstellungsmöglichkeiten von der Masse ab. Es gibt insgesamt 16 Übergangseffekte und 3 Vorgefertigte Themes die mit ausgeliefert werden. Von den Einstellungen her gesehen, ist alles vorhanden, was man gerne personalisieren möchte. Eine Demo des Nivo Sliders ist auf dieser Seite zu finden.
Das Script liegt in zwei verschiedenen Varianten vor: Zum einen gibt es die kostenlose jQuery Plugin Version (Open Source) und ein kostenpflichtiges WordPress Plugin (ab 19$). Gerade durch das WordPress Plugin hat der Nivo Slider eine hohe Popularität erreicht.
In diesem Artikel möchte ich euch erklären wie ihr die jQuery Plugin Variante in eure Webseite einbauen könnt.
Der Vollständigkeit halber möchte ich an dieser Stelle allerdings einen kleinen Screenshot, als Auszug des WordPress Plugins, mit einfügen:
Im Download-Paket des jQuery Plugins sind mehre Ordner und Dateien, dabei sind allerdings nicht alle relevant. Zum einbinden in die eigene Webseite benötigen wir folgende Dateien aus der *.zip Datei:
- jquery.nivo.slider.pack.js – gepackte Version des JavaScripts
- nivo-slider.css – CSS main-stylesheets
- /themes/ – Dieser Ordner enthält die drei Themes
Diese zwei Dateien inklusive dem themes Ordner kopieren wir nun in den Projekt-Ordner bzw. unsere Webseite.
Einbinden des Nivo Sliders
Um den Nivo Slider nun einzubinden müssen wir als erstes die Standard-Dateien mit unserer Webseite verbinden. Bei den Pfaden gehen wir davon aus, dass sich sämtliche Dateien auf der Hauptebene unserer Webseite befinden und nicht in Unterordnern wie /CSS/ oder /JS/.
Folgender Part muss zwischen die <head> * </head> Tags:
Neben diesen drei Hauptdateien müssen wir noch die CSS Datei von einem der drei Themes einbinden. In diesem Beispiel arbeiten wir mit dem Default-Theme und müssen entsprechend dazu noch diese Datei mit einbinden:
Nun folgt der HTML-Aufbau des Nivo Sliders, dieser sieht mit verlinkten Bildern z.B. wie folgt aus:
Solltet ihr nicht das Default Theme verwenden, muss die Klasse des ersten Div-Containers mit theme-default entsprechend angepasst werden.
Im letzten Schritt wird nun der Slider gestartet, dies geschieht über die dafür vorgesehene Javascript Funktion nivoSlider(). Diese Funktion wiederum führen wir in einer Standard-jQuery-Funktion aus: $(document).ready(). Die in $(document).ready() ausgeführten Funktionen werden erst dann geladen, wenn der DOM einer Webseite komplett geladen ist.
So würde nun unsere entsprechende Funktion aussehen (wird zwischen <script> * </script> Tags asugeführt):
$(document).ready(function(){
$('#slider').nivoSlider();
});
Diese kleine Funktion reicht im Prinzip schon um den Nivo Slider zu starten, nun gibt es allerdings noch eine lange Liste von Optionen, die eingestellt werden können, aber nicht müssen:
$(document).ready(function(){
$('#slider').nivoSlider({
effect: 'random', // Effekt der Übergänge z.B.: 'fold,fade,sliceDown'
slices: 15, // Slides der slice* Animationen
boxCols: 8, // Spalte für Box-Animationen
boxRows: 4, // Reihe für Box-Animationen
animSpeed: 500, // Animations-Dauer eines Übbergangs
pauseTime: 3000, // Pause zwischen dem nächsten Bild 1000 = 1 Sekunde
startSlide: 0, // Index-Wert des ersten Bilds
directionNav: true, // Weiter & Zurück Navigation einblenden
directionNavHide: true, // Weiter & Zurück nur bei hover anzeigen
controlNav: true, // 1,2,3... Navigation
keyboardNav: true, // Keyboard Navigation
pauseOnHover: true, // Animation bei hover unterbrechen
captionOpacity: 0.8, // Transparenz der Titelleiste
prevText: 'Prev', // Text des "Zurück" Buttons
nextText: 'Next', // Text des "Weiter" Buttons
randomStart: false, // Mit Zufallsbild starten
});
});
Bei den voreingetragenen Werten oben handelt es sich um die Standards die automatisch verwendet werden, wenn nicht anders angegeben.
Damit sind wird bereits am Ende dieses kleinen Tutorials, so einfach lässt sich der Nivo Slider in eine Webseite integrieren.
Ich wünsche euch viel Spaß damit.