Tutorials von Thomas Frei-Herrmann
Tutorial Nivo Slider
Hier geht es zum Download vom Nivo Slider:
Guckt Euch auch dieses Video mal an und lest auch meine Bemerkungen zu der HTML-Ausgabe XHTML und den Einbau der Lytebox.
Nach dem Download entpackt Ihr die ZIP Datei. Öffnet den Ordner
nivo-slider
Ich habe hier folgendes getan:
Zunächst habe ich mir einen eigenes Verzeichnis in meiner lokalen Publizierung und im Stammverzeichnis dieses Projektes auf meinem Server angelegt und die benötigten Skripte und die CSS-Datei in dieses Verzeichnis kopiert, welches ich
nivoscripts
genannt habe. Und zwar diese Dateien:
dann habe ich den gesamten Ordner:
themes
ebenfalls in mein Stammverzeichnis der lokalen Publizierung und auf den Server, mit den 4 verschiedenen Themen-Ordnern, kopiert:
Zusätzlich kopiert Ihr Euch noch den Ordner:
images
ebenfalls in dieses Stammverzeichnis und packt natürlich Eure Bilder in diesen Ordner “images”.
Nun verlinkt Ihr auf die .js Dateien und die .css Datei vom Nivo Slider in der HTML Eures Layouts oder Master-Rahmens.
> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen
Achtet dabei auf die relative Pfadangabe zu den Dateien, hier von der Startseite mit einem Punkt ./ von einer Unterseite mit zwei Punkten ../
Hier habe ich mal alle 4 CSS Dateien mit den 4 möglichen Themen verlinkt. Ihr benötigt natürlich nur das Thema Eurer Wahl.
<link rel="stylesheet" href="./themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="./themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="./themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="./themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="./nivoscripts/nivo-slider.css" type="text/css" media="screen" />
Jetzt zieht Ihr Euch ein Textfeld an der Stelle auf, an der dieser Slider erscheinen soll und fügt den Code unten in den HTML-Code Editor des Textfeldes ein.
> Textfeld aufziehen (Cursor blinkt) > Fenster “Text-Eigenschaften” > mittlere Button oben (Textfeld) > Button “HTML”
<div id="wrapper">
<div class="slider-wrapper theme-dark">
<div id="slider" class="nivoSlider">
<img src="./images/Meer.jpg" alt="Meer" title="Meer" />
<img src="./images/Wasserfall.jpg" alt="Wasserfall" title="Wasserfall" />
<img src="./images/Palmen.jpg" alt="Palmen" title="Palmen" />
<img src="./images/Sonnenuntergang.jpg" alt="Sonnenuntergang" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>Sonnenuntergang</strong> - mit Klick auf den Link geht es zu meiner Seite <a href="http://Domain.de/Seite.html">Seite</a>
</div>
</div>
</div>
<script type="text/javascript" src="./nivoscripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./nivoscripts/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
pauseTime: 6000,
animSpeed: 2000,
});
});
</script>
Für alle Optionen guckt bitte auf der Tutorial-Seite vom Nivo-Slider
XHTML
Solltet Ihr (wie ich) Eure Seiten in XHTML publizieren, muss die jQuery-Datei von NOF in eine neuere jQuery gewechselt werden, da sonst die Navigations-Leisten nicht korrekt angezeigt werden.
Hierfür eignet sich sehr komfortabel die SwissKnife for NOF Komponente “ReplaceJquery”.
Dann müsstet Ihr im Code (oben) natürlich die Verlinkung zur der jQuery einfach entfernen, also diese Zeile hier:
<script type="text/javascript" src="./nivoscripts/jquery-1.7.1.min.js"></script>
Lytebox 5 im Nivo Slider - funktioniert nicht im Internet Explorer
Ich habe auf meiner Seite Nivo-Lytebox noch zusätzlich die Lytebox 5 mit in den Nivo Slider integriert.
Hier geht es zu meinem Tutorial zur Lytebox 5.
Dazu habe ich die Fotos in einen Link verpackt und die entsprechenden Lytebox-Optionen mit eingetragen.
<div id="wrapper">
<div class="slider-wrapper theme-light">
<div id="slider" class="nivoSlider">
<a href="../images/Meer.jpg" class="lytebox" data-title="Meer" data-lyte-options="group:nivoslider"><img src="../images/Meer.jpg" alt="Meer" title="Meer - klicke auf das Foto zur Lytebox" /></a>
<a href="../images/Wasserfall.jpg" class="lytebox" data-title="Wasserfall" data-lyte-options="group:nivoslider"><img src="../images/Wasserfall.jpg" alt="Wasserfall" title="Wasserfall - klicke auf das Foto zur Lytebox" /></a>
<a href="../images/Palmen.jpg" class="lytebox" data-title="Palmen" data-lyte-options="group:nivoslider"><img src="../images/Palmen.jpg" alt="Palmen" title="Palmen - klicke auf das Foto zur Lytebox" /></a>
<a href="../images/Sonnenuntergang.jpg" class="lytebox" data-title="Sonnenuntergang" data-lyte-options="group:nivoslider"><img src="../images/Sonnenuntergang.jpg" alt="Sonnenuntergang" title="Sonnenuntergang - klicke auf das Foto zur Lytebox" /></a>
</div>
</div>
</div>
<script type="text/javascript" src="../nivoscripts/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
pauseTime: 6000,
animSpeed: 2000,
});
});
</script>
Viel Erfolg!