ModX Tutorial

Changing the net, one site at a time…

Coole Animationen mit dem Nivo-Slider erzeugen
seitenende-icon

Rotierende Headergrafiken, sich drehende Würfel oder andere optische Effekte können eine Seite toll aufpeppen ... . 
Wäre da nicht das Problem mit Flash. Wieso ist Flash ein Problem? Grundsätzlich ist es keines, doch läuft der "Blitz" nicht auf allen Browsern und verlangt nach einer aktuellen Verion, um die Animation abzuspielen, die man aber meist nicht geladen hat. Also auf Effekte verzichten?
Nein! es git im Internet viele tolle iQuery Versionen von Slidern, die html-basiert sind und mit JavaSCript sowie ein wenig CSS einfach in jedes Template zu integrieren sind. 

Hier soll nun mein Favorit unter den Slidern - nämlich der NivoSlider" vorgestellt werden. Eine aktuelle Version ist unter http://nivo.dev7studios.com/ im Internet erhältlich. Klickt man auf der Startseite auf "Download" kann man auf der sich nun lffnenden Seite das kostenlose jQuery Plugin auf den heimischen Rechner ziehen.

   
1. iQuery Plugin laden und entpacken
   
Wir erstelen zuerst eine beliebige Website in RapidWeaver, exportieren sie in einen Ordner auf dem Desktop und entpackt die Zip-Datei des nivo-sliders, in der man folgenden Content sieht: 
   
nivo-slider
   
2. Neue Ordner im Site Root-Folder erstellen
   

In unserem Site-Root-Folder legen wir nun im Verzeichnis "rw_common" - oder wie immer euer Ordner heißt -  zwei neue Ordner an: einen namens "images", der die Bilder für unseren Slider enthalten wird, und einen namens "nivo", in den wir die für die iQuery Slideshow notwendigen Bilder kopieren werden.

   
nivo-slider-upload 
top-icon  
3. Steuerdaten aus dem Nivo-Silder Ordner in den Rootfolder laden

Aus dem Ordner "nivo-slider" selbst kopieren wir die folgende Dateienin das Verzeichnis "nivo":
jquery.nivo.slider.pack.js
nivo-slider.css.
Aus dem Ordner  "demo" benötigen wir die Datei: 
jquery-1.6.1.min.js, die im Verzeichnis  "scripts" liegt.

 nivo-slider-dateiupload-1

Aus dem Ordner "themes" schließlich benötigen wir den gesamten Inhalt des Unerordners "default", weil wir dieses Theme für unseren Slider wählen werden. : das sind die Dateien:
arrows.png - bullets.png - default.css - loading.gif
Beim Upload ist darauf zu achten, dass NUR eine jquery-Datei auf den Server geladen wird -nämlich die jeweils aktuellste (in unserem Fall:  jquery-1.6.1.min.js).

   
4. Bilddateien für den Nivo-Slider ain den Rootfolder laden
   
Die zum Ablauf des Sliders notwendigen Dateien liegen innerhalb des "nivo-slider"-Ordners im Verzeichnis "images". Wir kopieren nun alle Bilder in den vorher angelegten Ordner "images" im Rootverzeichnis unseres RapidWeaver-Root-Folders.  image-upload
Hierbei ist nicht zu vergessen, später im html des Body-Bereichs des nivo-sliders , die Pfade für die Bilder anzupassen (Pfad: src="images/name-des-bildes.jpg").
 top-icon  
5. Head- und Body-Sektion des Nivo-Sliders ins Template integrieren
Wir öffnen nun die Datei index-html im Ordner "demo" mit einem Text- bzw. Html-Editor (Textwrangler etc.) head-body-tags
1. Links zu den js./css-Files einfügen und anpassen
header-js-calls
   

Von den oben aufgelisteten Scripten brauchen wir jedoch nicht alle: da wir für unseren Slider die Version "default" verwenden, ist der Verweis auf das Themen "pascal" und "orman" nicht notwendig. Auch der Verweis auf die CSS-Dateien "style.css" ist nicht erforderlich. Statt dessen brauchen wir die Datei default.css, die unser Thema styt.

attentionWichtig ist hierbei auch die Anpassung der Pfade: lautete der ursprüngliche Call für die default.css ursprünglich "../themes/default/default.css", so muss er nun: "rw_common/nivo/default.csss" lauten (siehe Eirichtung der Ordnerstruktur unter Punkt 2).

header-scripte-angepasst
 top-icon  
2. Scripte einfügen
Die Scripte aus dem unteren Bereich des Bodies aus der Datei "demo.html" ausschneiden und in den Head-Bereich des Templates unter die Links zu den js. / .css-Dateien einfügen
<script type="..."></script>.
Hier bitte auch alle Pfade anpassen (in unserem Falle)  src"rw_common/nivo/ ..."
   
6. Body-Bereich des nivo-sliders an gewünschter Stelle einfügen
   
nivo-slider-body-tags
   
Wie oben im Screenshot zu erkennen, ist der gesamte div mit der Klasse "slider wrapper theme default" ins Html des Templates eingefügt worden. Auch hier mussten die Pfade zu den Bilddateien geändert werden. Da der Ordner "images", der diese beinhaltet, im Root-Folder liegt, lautet der Pfad z.B.: src="images/nemo.jpg"
   
7. CSS der Slideshow anpassen
top-icon  
Rufen wir nun die index.html unseres Templates auf, sehenwir den nivo-slider in Aktion: Einen Haken hat die Sache jedoch: unser div, der den Slider im Template beherbergt, hat eine Breite von 900 x 180 Pixeln, die Bilddateien aus der Demo-Datei unseres nivo-sliders haben aber nur eine Breite von 618, aber dafür eine Höhe von 246 Pixeln.
Der Slider funktioniert zwar, doch füllen die Bilder unseren div nicht aus, und der unter unserem Slider gelegene Content wird nach "unten" gedrückt, was das Design zerschießt.
Dieses kleine Manko gleichen wir aber sehr schnell aus, indem wir einfach die Datei "default.css" aus dem Ordner "nivo" aufrufen und nach der ID suchen, die die Bilder des Sliders stylt. 
   
nivo-slider-default-css
   
Da hier im CSS keine spezifische Höhe und Breite des Sliders angegeben ist, fügen wir nun den bestehenden Parametern zwei neue hinzu: nämlich die Angaben zu width (Breite)  und height (Höhe), in unserem Falle 900 x 180 px.
   
Gehen wir nun zurück zu unserer index-html und rufen diese auf, so stimmt nun alles; der Slider läuft und die Bilder füllen unsern div komplett aus.

voila - unser nivo-slider funktioniert! 
top-icon