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:
<!-- nivo-slider.css - ist die main stylesheet --> <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> <!-- Aktuelle Version des jQuery Frameworks über Google's CDN --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <!-- Die gepackte Hauptdatei des Nivo Sliders --> <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script> |
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:
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" /> |
Nun folgt der HTML-Aufbau des Nivo Sliders, dieser sieht mit verlinkten Bildern z.B. wie folgt aus:
<div class="theme-default"> <div id="slider" class="nivoSlider"> <a href="#"><img src="bild-1.jpg" alt="Bild 1" title="Nivo Slider Caption - Titel" /></a> <a href="#"><img src="bild-2.jpg" alt="Bild 2" title="Nivo Slider Caption - Titel" /></a> <a href="#"><img src="bild-3.jpg" alt="Bild 3" title="Nivo Slider Caption - Titel" /></a> </div> </div> |
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.
Schlagworte zu diesem Artikel: CSS, HTML, JavaScript, jQuery, Nivo Slider
Ihh, Nivo Slider ^^
Hey, der Nivo Slider ist cool, aber dein Rhino Slider spielt in der selben Liga, haue den Artikel später raus 😉
Noch spielt er in der selben Liga. Mit Version 1.1 wird sich das ändern.
Na dann bin ich mal gespannt, habe den Rhinoslider ehrlich gesagt noch nie ausprobiert, für die meisten kleinen Seiten hat meine eigene Slideshow gereicht und wenn es mehr Effekte sein sollten, dann war es bei mir immer der Nivo Slider.
Achso, was ich damit sagen will: Ich werde ihn dann in der neuen Version auf jeden Fall mal bei meinem nächsten Projekt mit Slider testen 🙂
Hallo Pascal,
toller Slider.
Allerdings habe ich die Größe der Bilder auf 640 x 480 geändert, was auch funktioniert.
Aber wie bekomme ich die Steuerung vor – zurück – pause unter den Slider?
Danke
Hi, Pascal,
mal ne dumme Frage, kann ich den Nivo Slider auch einsetzten, wenn ich nicht mit WordPress arbeite ??
Hallo Frank,
dumme Fragen gibt es nicht und ja du kannst, da gibt es zwei Möglichkeiten:
Nr. 1: Du kaufst das WordPress Plugin für 19$, damit lässt sich das ganze am einfachsten machen und vor allem auch über WordPress verwalten.
Nr. 2: Du programmierst die Slideshow so wie oben gezeigt in dein Theme, musst dann halt die Pfade mit bloginfo(‚template_url‘); anpassen.
Beste Grüße
Pascal
nur noch mal zur Verdeutlichung:
ich arbeite NICHT mit WordPress und werde es voraussichtlich auch nicht;
gehts dann trotzdem ?
Ich hab Deine Antwort als JA gedeutet !?
hArzlichen Gruß
frank
Oh sorry Frank, ich hatte das „nicht“ überlesen, klar geht es ohne WordPress, in dem Fall zu 100% genau so wie oben in dem Artikel beschrieben.
ok,
vielen Dank für die schnelle Antwort
rg
frank
Kein Problem, kannst den Artikel gerne noch mit den Sternen bewerten und / oder mit Freunden teilen, wenn es dir gefällt und alles klappt.
Hallo Pascal,
ich habe den Nivo slider erfolgreich und nach Anleitung eingebunden(ohne WordPress), er läuft auch wie er soll, allerdings hab ich im Chrome ein Problem. Und zwar befinden sich bei einigen Effekten paralelle Streifen im Bild und durch diese Streifen schimmert das darunter liegende Bild durch. Kennst du das Problem?
Vielen Dank im Voraus
hat sich erledigt 😉
Hallo, ihr Beitrag zu Nivo-Slider ist gut erklärt, das kann jeder nachvollziehen – Toll !!
Ich habe aber trotzdem noch eine Frage:
Wenn ich den Text rechts oder links neben der Slidhow haben möchte statt unten, wie kriegt man das hin?
Ich habe das bei „s3Slider“ als Demoseite gesehen leider funktioniert bei s3Slider nicht das responsive Webdesign was bei Nivo-Slider der Vorteil ist, deshalb habe ich mich auch für Nivo-Slider entschieden.
Eine kurze Info per Email wäre toll.
Mit freundlichen Grüßen
J.G.
Hi,
das kannst du über CSS mit einem eigenen Design für den NivoSlider lösen.
Pascal
Ich versuche gerade, 2 Slideshows mit verschiedenen Bildern in eine Seite zu setzen, aber irgendwie zeigt er mir nur die erste… mach ich irgendwas falsch?
Beide Shows sind mit …. eingebunden