jQuery Bild Slider

Test NivoSlider mit MouseOver-Stop

NivoSlider

Der Nivo-Slider gilt weltweit als einer der schönsten und auch einfach zu bedienenden Slider auf dem Markt . Das jQuery-Plugin ist kostenlos und Open Source. Es gibt keinen besseren Weg, um das Website-Layout mit einem atemberaubenden Eye-Catcher zu versehen.

Was muss ich tun?

Installation von NIVO-Slider als Plugin für phpWCMS R.507 ff

Download der gesamten Files für NIVO/ phpwcms und entpacken
Übertragung per FTP der entsprechenden Verzeichnisse, es werden keine standardmäßgen Files überschrieben.
Bei einem Upgrade auf eine neue Version, bleiben diese erhalten.
Das war's schon.
Erstelle einen neuen Contenpart mit BILDER SPECIAL.
Wähle in VORLAGE das Template: "nivoSlider",
Erstelle die entsprechenden Bilder (Vorschau und Grossansicht),
Trage einen INFOTEXT ein, der dann im Fuß der Bilder auftauschen soll.
Optional fülle im CK-Editor einen Text/ Erläuterung zu diesem CP aus.
Speichern, fertig und Testen

ACHTUNG:

Der Slider ist responsiv, er past sich automatisch an ein umgebendes DIV-Konstrukt an.
Wähle also eine entsprechende Breite des DIV-Containers und schon passt sich der Slider in diesem Container selber an!

NIVO-Slider 3.2. und jQuery 1.9ff, ohne Caption

Thread dazu im Forum:

http://forum.phpwcms.org/viewtopic.php?f=28&t=23955&p=139414#p139414

test 2

NIVO3.2. ohne CPsort.rar

angepasster Slider (Korr.) ohne CPsortierung, kleine Änderungen müssen selber gemacht werden (CSS/ Thumbs etc)
rar, 31.5K, 02/04/14, 213 downloads

weitere Konfigurationen

$(document).ready(function(){
  $('#slider').nivoSlider({
    effect: 'random', // Effekt der Übergänge z.B.: 'fold,fade,sliceDown'
    slices: 15, // Slides der slice* Animationen
    boxCols: 8, // Spalte für Box-Animationen
    boxRows: 4, // Reihe für Box-Animationen
    animSpeed: 500, // Animations-Dauer eines Übbergangs
    pauseTime: 3000, // Pause zwischen dem nächsten Bild 1000 = 1 Sekunde
    startSlide: 0, // Index-Wert des ersten Bilds
    directionNav: true, // Weiter & Zurück Navigation einblenden
    directionNavHide: true, // Weiter & Zurück nur bei hover anzeigen
    controlNav: true, // 1,2,3... Navigation
    keyboardNav: true, // Keyboard Navigation
    pauseOnHover: true, // Animation bei hover unterbrechen
    captionOpacity: 0.8, // Transparenz der Titelleiste
    prevText: 'Prev', // Text des "Zurück" Buttons
    nextText: 'Next', // Text des "Weiter" Buttons
    randomStart: false, // Mit Zufallsbild starten
    controlNavThumbs: false, // Use thumbnails for Control Nav
    controlNavThumbsFromRel: false, // Use image rel for thumbs
    controlNavThumbsSearch: '.jpg', // Replace this with...
    controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
    manualAdvance: false, // Force manual transitions
    beforeChange: function(){}, // Triggers before a slide transition
    afterChange: function(){}, // Triggers after a slide transition
    slideshowEnd: function(){}, // Triggers after all slides have been shown
    lastSlide: function(){}, // Triggers when last slide is shown
    afterLoad: function(){} // Triggers when slider has loaded
  });
});

Test optimierter NivoSlider

kleines Problem gelöst

Wenn man auf einer Website in ein und denselben Artikel den NIVO-SLIDER benutzt, kommt es zu dem Effekt, dass nur der erste Slider startet. Ursache ist im Forum geklärt. Wie oben zu sehen, funktionieren jetzt beide Slider. Das Download ist dafür aber nicht geändert worden. Da es sich um eine Kleinigkeit handelt, kann jeder selber entscheiden, on er die kleine Änderung vornimmt.