jQuery für Webdesigner

Implementierung des Nivo-Sliders

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video folgt die Einbindung und Implementierung der Grafik-Slideshow mit Hilfe des externen jQuery-Plug-ins "Nivo-Slider". Folgen Sie einem Verweis auf Informationsquellen zur Verwendung externer Bibliotheksfiles.

Transkript

In diesem Video zeige ich Ihnen die Implementierung einer Grafik-Slideshow mithilfe des externen Skriptes nivo-slider der Dev7studios in unserem eigenen Projekt bike-travel-scotland. Und damit wir überhaupt eine Slideshow implementieren können, benötigen wir natürlich Grafiken. Ich wechsel mal zurück in den Ordner images. Diese Grafiken gibt es schon, vier Stück an der Zahl: slider01 bis slider04. Und das wäre so der erste Schritt, den ich natürlich in meinem Skript hier in dem HTML-Dokument mit einbinden muss. So, im Moment haben wir hier nur Einzelgrafiken, also kopiere ich mir quasi diesen einen Eintrag und setze das noch drei weitere Male unten rein und ergänze dann einfach 2, 3, 4, sodass ich nun alle diese vier Grafiken geladen bekomme. Das kann man sich auch schon mal anschauen, also wenn ich das speichere und das HTML-Dokument aktualisiere, dann habe ich jetzt vier Grafiken hier drin. Und diese vier Grafiken, die möchte ich jetzt eben animieren, dass die übereinander gesetzt und animiert werden. Die Informationen dazu besorgt man sich am besten zusätzlich über die Dokumentation der Skripte. Häufig gibt es auch Readmes, die bei den Skripten mit dabei sind, also das sehen wir auch hier im nivo-slider. Ich wechsel da in den Ordner hinein. Sehen Sie: Da gibt's auch hier README, und da stehen immer wieder auf die eine oder andere Art und Weise Informationen drin, die man dann heranziehen kann. Gut, also das heißt, die Vorbereitung habe ich getroffen und jetzt muss ich eigentlich als Erstes mal das externe Skript des nivo-sliders einbinden. Und das, was wichtig ist, ist der hier: der jquery.nivo.slider.js, also diese externe Datei. Ja und die binde ich genau auf die gleiche Art und Weise wie das normale jQuery-Bibliotheks-File ein, das heißt, hier sage ich dann an der Stelle, wo der Slider, also diese Datei liegt, die JavaScript-Datei, wo die sich befindet, das ist in dem Ordner nivo-slider, und dann kann ich entsprechend danach den nivo-slider selber laden und das ist jquery.nivo.slider.js. Ja, das war's an der Stelle, das None kann geschlossen werden. Damit hätten wir schon mal diese Vorbereitungen getroffen, um das Skript verwenden zu können. Jetzt muss ich allerdings, damit das Skript überhaupt arbeiten kann, natürlich hier in meinem Dokument Vorbereitungen treffen, weil: Woher soll das Skript sonst wissen, dass es auf den Layer header zugreifen soll? Und da gibt's ein paar Vorbereitungen: Unter anderem muss ich um diese Grafiken einen weiteren None drumherum packen und dieser None, der muss die id="slider" bekommen. Das habe ich gemacht und wenn die id="slider" vergeben ist, dann sollten Sie auch noch die Klasse nivo-slider einbinden das ist für das spätere Aussehen dann wichtig, dass er einmal weiß über die ID, was haben wir im Dokument und welche Klasse wird darauf angewendet. Und da IDs nur einmal im Dokument verwendet werden können, ergibt sich dadurch zwangsläufig, dass ich auch zumindestens standardmäßig nur diesen einen Slider einsetzen kann. So, und damit hätte ich quasi die Vorbereitung schon getroffen. Und wenn wir jetzt das Dokument starten würden, dann würde nichts passieren, weil eine Sache fehlt noch an der Stelle: der nivo-slider selbst, der muss gestartet werden und dafür brauchen wir entsprechend noch ein Skript. Und das füge ich hier ein, so. Und hier ist es jetzt wichtig, dass nicht das Dokument selbst fertig ist mit dem Ladevorgang, sondern hier ist es wichtig, dass das gesamte Fenster mit einschließlich aller Grafiken fertig ist mit dem Ladevorgang, weil die Grafiken müssen alle zur Verfügung stehen, damit der nivo-slider damit arbeiten kann. Deswegen empfiehlt sich hier beziehungsweise empfiehlt auch Dev7studios die Funktion $(window).load() und der Aufbau ist nichts Besonderes: einfach die Funktionen, die wir bisher auch verwendet haben. Und dann greife ich zu auf die ID #slider, da haben wir es jetzt hier unten, in der Form, das ist der Bezug dazu. Und anschließend starte ich den .nivoSlider() und der schreibt sich mit großem S. So, und dieser .nivoSlider(), der ist in diesem Skript definiert und entsprechend kann ich nun diesen Prozess starten. Einmal die Datei speichern. Wechseln wir zum Webbrowser und schauen uns an, was jetzt geschieht. Ich aktualisiere das Dokument und ich hab hier schon was stehen, was vorhin nicht da war, das sieht schon gut aus und es dürfte, wie Sie sehen, auch eine Bewegung entstehen. Die ist jetzt zwar überhaupt nicht in unserem Sinne, aber das ist kein Grund zur Panik. Das liegt einfach daran, dass der Slider jetzt noch überhaupt nicht weiß, was er denn mit diesen einzelnen Grafiken hier anfangen soll. Aber Sie haben gesehen, was funktioniert, ist: Nachdem alle Grafiken geladen wurden – das dauert einen kleinen Moment –, dann wird der Slider gestartet und diese Informationen, die stehen hier in diesem Skript. So, und jetzt müssen wir nur noch sehen, dass wir den Slider vernünftig mit seinem Aussehen belegen und da gibt's mehrere Möglichkeiten. Als Erstes, damit dieser Durcheinander aufhört, müssen wir das Stylesheet von dem nivo-slider selber direkt einbinden und das geschieht hier über den Punkt None hier oben an der Stelle und das habe ich jetzt schon mal vorbereitet, in die Zwischenablage kopiert. Das ist das gesamte Skript des nivo-sliders an sich, so, also das Stylesheet des Sliders. Und selbst hier, wenn wir das jetzt abspeichern, dann werden wir schon feststellen, dass sich da was ändert. Und zwar das sieht schon wesentlich besser aus wie eben, zwar immer noch nicht ganz perfekt, aber immerhin macht er jetzt mit den Grafiken, was er machen soll, und hier unten haben wir noch Zahlen, aber das wird jetzt schrittweise geändert. So, der nächste Schritt ist nun, dass dieser nivo-slider, der jetzt im Grunde schon so arbeitet, wie er arbeiten soll, noch mit einem weiteren Aussehen ausgestattet werden muss oder kann, und da gibt's verschiedene Möglichkeiten und auch verschiedene Stylesheets, die mitgeliefert werden. Das zeige ich Ihnen noch mal kurz. Ich gehe jetzt hier in den Ordner nivo-slider und da gibt es einen Unterordner, der heißt themes. Wenn man dort drauf klickt, dann sieht man bar, dark, default und so weiter. Gucken wir mal, was hier, weil ja ganz oben steht, der bar-Eintrag hat. Hier drin gibt es ein Stylesheet bar plus verschiedene Icons. Und wenn ich dieses Stylesheet haben möchte, dann muss ich auch das einfügen und das habe ich schon über die Zwischenablage vorbereitet und Sie sehen, es verweist genau auf nivo-slider/themes/bar/bar.css. Jetzt weiß aber der Slider und das Stylesheet noch nicht, wie er hier dran kommen soll. Ich muss jetzt irgendwie die unterschiedlichen Stylesheets zuweisen und das hat Dev7 relativ clever gemacht und zwar muss man hier einfach um das gesamte Konstrukt eine Klasse legen und diese Klasse bekommt den Namen theme- und jetzt den Namen, wie er hier oben immer drin steht, also in dem Falle wäre das theme-bar. So und das muss ich nun ganz einfach hier unterhalb wieder schließen und dann kann ich den ganzen Block einrücken, da ist was schief gelaufen, so, und hab jetzt quasi die Beziehung zu diesem Stylesheet auf diesen Block des Sliders gelegt. Also, ist ganz clever gemacht. Ich bestätige das und speicher die Datei ab. Wechseln wir in den Slider, und Sie sehen, jetzt verschwindet das hier unten und jetzt haben wir dieses Aussehen, das so eine Rand-Leiste aufbaut, ist auch ganz nett. Also müssen Sie entscheiden, ob Sie das stehen lassen. Ich würde ganz gerne die default-Einstellung nehmen, weil mir die am besten gefallen hat für den Prozess, und deswegen kopiere ich quasi anstelle der bar die default-Einstellung hier rein, lösche das Stylesheet für die bar wieder hinaus. So, damit steht hier default und damit das greifen kann, muss ich hier unten einfach aus bar default schreiben und hab nun alle Vorbereitungen getroffen. Ich speichere ab, wechsel in den Slider und aktualisiere, und jetzt sieht das so aus wie in der Ausgangssituation Ja und das gefällt mir am allerbesten. Hier kann ich nun durch die Grafiken durchklicken. Ich hab solch eine Richtungsanweisung hier, solche Navigationsbuttons zum Vor- und Zurückklicken. Also Sie sehen, eine durchaus elegante und relativ einfache, durchdachte Methode, Grafik-Slider in ein eigenes Webprojekt mit einzubeziehen.

jQuery für Webdesigner

Sehen Sie, wie sich schnell und einfach eine jQuery-Entwicklungsumgebung einrichten und ein eigener Webserver installieren lässt, um danach Ihre Website durch jQuery aufzuwerten.

2 Std. 54 min (23 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!