Nivo Slider

Tutorials von Thomas Frei-Herrmann

Tutorial Nivo Slider

Hier geht es zum Download vom Nivo Slider:

nivo.dev7studios.com

 

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:

  • jquery.nivo.slider.js
  • jquery.nivo.slider.pack.js
  • jquery-1.7.1.min.js
  • nivo-slider.css

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:

  • bar
  • dark
  • default
  • light

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>

  • Oben gebt Ihr das gewählte Thema (CSS Datei) an, hier “dark
     
  • Achtet bei den Bildern wieder auf die richtige relative Pfadangabe, hier von der Startseite nur mit einem Punkt ./
     
  • Ihr könnt als Titel auch die ID “#htmlcaption” angeben. Diese ID tragt Ihr im gelben DIV-Container darunter ein. Für weitere IDs benennt Ihr diese in z.B. “htmlcaption2” um und fügt diese als weitere DIV-Container hinzu.
     
  • Achtet auch bei der Verlinkung zu den .js Dateien auf die korrekte relative Pfadangabe.
     
  • Unten in dem Skript habe ich noch die Zeit zum Anzeigen der Bilder eingetragen “pauseTime” - hier 6 Sekunden
    sowie die Geschwindigkeit der Animation “animSpeed” - hier 2 Sekunden.

 

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!

diese Seite weiter empfehlen



Counter Statistik