Nivo-Slider – Hinweise und Einstellungen

 18. November 2013

Nivo-Slider jQuery Plugin

Der Nivo-Slider kommt in einigen ecomStyle.de-Themes zum Einsatz und bietet Ihnen zahlreiche Vorteile:

  • 16 einzigartige Übergangseffekte
  • Saubere & valide Programmierung
  • Viele Einstellmöglichkeiten
  • Integrierte Richtungs-und Control Navigation
  • Unterstützt Verknüpfung von Bildern
  • HTML Bildunterschriften
  • Kostenlos zu benutzen

Das Nivoslider-Plugin für den OXID eShop finden Sie hier:
Nivoslider4OXID, gratis für unsere Kunden

Die Bannerbilder werden bequem und ohne Programmierkenntnisse im Adminbereich Ihres Shop hochgeladen und auf Wunsch mit Produkten oder Kategorien aus dem Shop oder mit beliebigen Websiteadressen verknüpft.

Wurden Bannerbilder mit Produkten verknüpft, wird automatisch der Produktname und -Preis bei der Produktpräsentation im Nivo-Slider mit eingeblendet.

Nivo-Slider Einstellungen

Es stehen folgende Einstellmöglichkeiten zur Verfügung:

effect: 'random', // 'random' oder Übergangseffekte auflisten z.B: 'fold,fade,sliceDown' *
 slices: 8, // Anzahl der Streifen für den Slice-Effekt
 boxCols: 6, // Anzahl der Spalten für den Box-Effekt
 boxRows: 3, // Anzahl der Zeilen für den Box-Effekt
 animSpeed: 900, // Geschwindigkeit des Übergangseffektes
 pauseTime: 2800, // Zeit wie lange jedes Bild angezeigt wird
 startSlide: 0, // Nummer des Bildes mit dem gestartet werden soll (die Zählung beginnt mit 0)
 directionNav: true, // Ob Vor- & Zurücknavigation angezeigt werden soll
 directionNavHide: true, // Navigation nur anzeigen wenn der Mauszeiger auf einem Bild ist
 controlNav: true, // Ob eine 1,2,3... Navigation angezeigt werden soll
 controlNavThumbs: true, // Ob Miniaturbilder zur Navigation angezeigt werden sollen
 controlNavThumbsFromRel: false, // Das rel Attribut bei der Navigation mit Miniaturbildern verweden
 controlNavThumbsSearch: '.jpg', // Welche Bilder für die Miniaturbilder verwendet werden sollen
 controlNavThumbsReplace: '_thumb.jpg', // controlNavThumbsSearch hiermit ersetzen um die Namen der Miniaturbilder zu erhalten
 keyboardNav: false, // Ob Links- & Rechtspfeile des Keyboards zur Navigation verwendet werden sollen
 pauseOnHover: true, // Ob die Animation angehalten werden soll wenn der Mauszeiger auf einem Bild ist
 manualAdvance: false, // Ob die Animation nur manuell erfolgt
 captionOpacity: 0.8, // Durchsichtigkeitsfaktor der Bildtexte
 prevText: 'Prev', // Text für die Zurück-Navigation
 nextText: 'Next', // Text für die Vor-Navigation
 randomStart: false, // Ob mit einem zufälligen Bild gestartet werden soll
 beforeChange: function(){}, // Funktion die vor einem Bildübergang aufgerufen wird
 afterChange: function(){}, // Funktion die nach einem Bildübergang aufgerufen wird
 slideshowEnd: function(){}, // Funktion die nach allen Bildübergängen aufgerufen wird
 lastSlide: function(){}, // Funktion die aufgerufen wird wenn das letzte Bild angezeigt wird
 afterLoad: function(){} // Funktion die aufgerufen wird wenn der Slider geladen ist

* Der effect Parameter kann folgende Werte haben:

random, sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold,
 fade, random, slideInRight, slideInLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow,
 boxRainGrowReverse.

Der Nivo-Slider ist in einigen eComStyle.de-Themes bereits voll funktionsfähig integriert.

Alternativ kann der Nivo-Slider unter http://nivo.dev7studios.com/  kostenlos heruntergeladen und auf jeder beliebigen Website selbst eingebaut werden.