jQuery für Webdesigner

Download/Bezug der Grafik-Slideshow "nivo-slider"

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Hier geht es um die Bezugsquellen für Grafik-Slideshows und die Vorbereitung des "nivo-slider"-Skripts zur Verwendung im eigenen Projekt "biketravel-scotland".

Transkript

In diesem Video zeige ich Ihnen vorbereitende Maßnahmen und Bezugsquellen, wo Sie externe Skripte herbekommen können, um Ihre eigenen Webprojekte aufzuwerten. In unserem bike-travel-scotland-Projekt soll aus dieser statischen Grafik im Kopf des Dokumentes später eine ansprechende Slideshow werden und dann stellt sich die Frage: Woher bekommt man solche externen Plugins? Natürlich können Sie selbstverständlich nach solchen Plugins googeln, aber eine weitere sehr gute und vertrauenswürdige Quelle ist jQuery.com selber. Und zwar gibt es hier einen Menüpunkt, der heißt Plugins, und in diesem Punkt oder unter diesem Punkt gibt es jQuery Plugin Registry, wo Sie jetzt nach solchen Plugins, die Sie interessieren, suchen können. Oder Sie finden unter Popular Tags hier auf der linken Seite schon eine Vor-Sortierung und da sieht man, gibt es tatsächlich auch schon einen Slider. Hier ist nicht alles Slider Grafik-Slider, was so geschrieben ist, sondern da haben wir hier zum Beispiel einen Schieberegler, der numerische Werte verändert. Ah, hier als Vorletztes taucht was mit Foto auf, das wird’s wahrscheinlich sein. Ich klicke das einfach mal an. Gucken wir uns das mal kurz auf der Homepage an. Das sieht schon prima aus und in aller Regel hat man neben den Demos, also die man ausprobieren kann, auch wie hier schon eine Erklärung, wie das Ganze eingebunden und implementiert wird. Das ist jetzt allerdings nicht das, was ich gerne benutzen würde. Somit verlasse ich das jetzt mal wieder an der Stelle. Die weitere Möglichkeit ist, wie eben schon gesagt, danach zu googeln. Dann sollten Sie allerdings genau wissen oder auch ein bisschen darauf achten, dass die Skripte aus vertrauenswürdigen Quellen kommen. Für das aktuelle Praxisbeispiel möchte ich den nivo-slider einsetzen. Der nivo-slider ist sicherlich mit einer der am weitverbreitetsten Slider, Grafik-Slider für solche Projekte. Der wird vertrieben und auch entwickelt von den Dev7studios und entsprechend ist das auch direkt schon der richtige Link. Vermeiden Sie’s, dieses Skript – und das wird an vielen, vielen anderen Stellen, wie man auch hier sieht, angeboten. Vermeiden Sie das, gehen Sie direkt auf die Dev7studios und Sie wissen, dass Sie auch das saubere Skript haben, das für die weitere Arbeit notwendig ist. Kaufen, keine Bange, müssen Sie es nicht. Das braucht man nur, wenn man ein WordPress-Plugin verwenden möchte nach dieser Basis. Sie können direkt hier auf den Download-Button jQuery Plugin klicken und das freie jQuery nivo-slider Package downloaden. Das ist im Moment aktuell Version 3.2. Ich speichere diese Datei, das ist geschehen. Schauen wir es uns an, das dürfte dann hier im Download-Bereich liegen und, ja, ist dieses ZIP-Archiv. Ein Doppelklick auf das ZIP-Archiv bringt uns in den nivo-slider direkt und hierdrin finden wir dann alle Dateien, die wir benötigen. Keine Bange mit diesen __MACOSX-Einträgen: Die brauchen Sie eigentlich nicht. Die können Sie ignorieren auf einem Windows-Rechner. Da ist scheinbar das Verzeichnis nicht gesäubert worden. Auf dem Mac werden Sie die wahrscheinlich gar nicht sehen. Also, ich kopier jetzt einfach mit der rechten Maustaste den Ordner nivo-slider und bring den zurück hier in unserer htdocs-Verzeichnis bike-travel-scotland, also in das Projektverzeichnis. Rechte Maustaste und Einfügen. So, und in dem nivo-slider selber, dort gibt es ein demo-Verzeichnis, das sehen wir hier, und dieses demo-Verzeichnis, das kann man ausprobieren. Also, wir können ja mal ganz kurz reinschauen. localhost, dann haben wir jquery und dann haben wir biketravel-scotland und nivo-slider. So, und in dem nivo-slider selber habe ich jetzt noch etwas vergessen. Ja, irgendetwas habe ich falsch eingegeben. … jquery/biketravel … Ich gehe nochmal grad hierhin. So, bike-travel-scotland, da habe ich was vergessen, genau. Dann wären wir hier bei nivo-slider und da wollte ich hin. Und dann klicke ich einfach mal auf demo und starte das Demo. So. Und da, sieht man, hat man den nivo-slider schon als recht nettes Beispiel in der Einbindung. So, das ist ganz hilfreich, um sich näher auch mit der Programmierung auseinanderzusetzen. So empfehle ich durchaus, da mal reinzuschauen, wenn man das sich genauer angucken möchte. Für unseren Fall können wir darauf allerdings verzichten und ich lösche dieses Verzeichnis an der Stelle. Also einfach rechte Maustaste und Löschen. Für das Projekt brauchen wir das nicht. Diesen .DS_Store, falls Sie den bei sich auch sehen, schmeißen Sie den aus, das ist auch wieder eine Mac-Datei und unter Mac wird sie gar nicht sichtbar sein. Hier unter Windows hat sie keine Bedeutung. Ja, und den Rest der Daten, den lassen Sie einfach so, wie Sie ihn hier in diesem Ordner vorfinden. Das Einzige, was jetzt gemacht werden muss, ist: Dieser nivo-slider muss mit der Programmierung mit unserer Seite unter NetBeans im Editor verbunden werden. Dazu benötigen Sie Grafiken ebenso viele, wie Sie slidemäßig einbinden möchten, plus dann die schrittweise Implementierung der einzelnen notwendigen jQuery-Schritte. Hier wieder die Frage: Woher weiß ich denn, was ich da tun muss? Da gehen wir noch mal zu bike-travel-scotland. Jetzt habe ich das eben geschlossen, nivo-slider, so. Wechseln wir da noch mal kurz hin und die Dev7studios, die haben ganz unten unter dem Download-Button auch eine Documentation und die ist sehr empfehlenswert. Wenn Sie hier draufklicken, dann sehen Sie: Es gibt nicht nur den Slider, den die anbieten, sondern noch zwei weitere jQuery-Plugins, unter anderem eben ein Lightbox und carouFredSel. Wir gucken uns den nivo-slider an. Neben einem netten Video-Tutorial von denen haben wir auch hier die Beschreibung dann, wie die Files installiert werden müssen und was man voraussetzen muss. Also hier sehen Sie zum Beispiel, dass also ein Stylesheet eingebunden werden muss, dass selbstverständlich die Google-API oder besser gesagt die jQuery-Bibliothek eingebunden werden muss plus diverse vorbereitende Maßnahmen in dem Dokument. Sie merken: Man findet diese Informationen schon, und lassen Sie sich nicht unbedingt von dem Englischen abschrecken, wenn das Schwierigkeiten macht, weil: Wichtig ist eigentlich das, was hier in diesen Skriptbeschreibungen drinsteht, und das kann man auch verstehen in vielen Fällen, ohne dass man diesen ganzen Fließtext lesen muss.

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!