Nivo Slider: neues Plugin für phpwcms R534

[update]

Ich räum erst mal ein wenig den source code auf und überhaupt
Und dann checke ich noch mal FF...

[update]

So, jetzt sind wir wieder inhaltlich richtig beim Nivo-Slider angelangt (Camera-Slider ist nicht mehr ). Mit dem Nivo geht das alles perfekt. Alles im Slidermodul definiert und ein wenig CSS und et lööpt in allen Brausern!

I've added a little section for Nivo: http://www.phpwcms-howto.de/wiki/doku.p ... ptions_fly

[update]

Nachtrag: Das ist einfach cool!
Einfach alles in das HTML-Feld schreiben, CSS-Styling dazu und ab geht der Luzy (und die Luzy auch)

[kukki]

Nivo Slider: Plugin für V 1.8.4

Bei Überarbeitung einer Website bin ich auf ein Problem gestoßen, dass mir schon früher unterkam, aber wegen der Verwendung des Nivo-Plugins als nicht sooo wichtig vorkam. Jetzt bin ich wieder drauf gestoßen und versuche dazu Hilfe zu finden:

Der Zustand ist wie folgt (Quelle "Spielwiese"):
Mittels CP Bilder<div>/ Bilder Spezial werden Bilder für den Nivo-Slider vorbereitet. Das Template sieht wie folgt aus (Quelle "Spielwiese"):

Code: Select all

<!--IMAGE_SETTINGS_START//-->
; this is formatted like WIN.INI
; please: do not use comments for value lines
; settings will overwrite CP settings
;width			= 100
;height			= 100
;col			= 1
zoom			= 1
;crop			= 0
;space			= 10
;lightbox		= 0
;nocaption		= 0
;random			= 0
;limit			= 0
; if set to 1 and total amount of images > limit render hidden feature
;hide_limited	= 0
; 0 = no center, 1 = horizontal/vertical, 2 = horizontal, 3 = vertical
;center_image	= 0
<!--IMAGE_SETTINGS_END//--><!--IMAGES_HEADER_START//-->
 [TITLE]<h3>{TITLE}</h3>[/TITLE]
 [SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
 [TEXT]{TEXT}[/TEXT]
 <!-- CSS: {TEMPLATE}nivo/nivo.min.css -->
 <!-- CSS: {TEMPLATE}nivo/themes/default/default.css -->
  <div class="slider-wrapper theme-default">
   <div id="slider" class="nivoSlider"> 
<!--IMAGES_HEADER_END//-->

<!--IMAGES_ENTRY_START//-->
       <img src="{IMAGE_REL}"[TITLE] title="{TITLE}"[/TITLE] width="{IMAGE_WIDTH}" alt="[ALT]{ALT}[/ALT]" />   
<!--IMAGES_ENTRY_END//-->

<!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//-->
<!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->
<!--IMAGES_FOOTER_START//-->
    </div></div>
    
    <!-- JS: {TEMPLATE}nivo/nivo.min.js -->
    <!-- JS: $(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: 1000, // Animations-Dauer eines Übbergangs
    pauseTime: 5000, // 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: false, // Keyboard Navigation
    pauseOnHover: true, // Animation bei hover unterbrechen
    captionOpacity: 0.8, // Transparenz der Titelleiste
    prevText: 'zurück', // Text des "Zurück" Buttons
    nextText: 'weiter', // Text des "Weiter" Buttons
    randomStart: false, // Mit Zufallsbild starten
  });
});
    -->
<!--IMAGES_FOOTER_END//--> 

Sowie man einen zweiten Slider mit diesem CP im gleichen Artikel einsetzt, wird nur der erste abgespielt, der zweite ist unsichtbar. (Siehe hier (TEST 2) incl. F12-kontrolle)

Anscheinend wird durch das erneute "Nach"laden der *nivo.js die ganze Sache ausgehebelt. Eine Lösung wäre nur, wenn im Template eine Möglichkeit vorhanden wäre, die testet, ob diese JS bereits existiert und ein erneutets Laden unterbunden wird. Gibt es dafür sinnvolle Lösungsansätze oder Verbesserungen für das Template? Wer kann mir da helfen bitte

[nameless1]

<div id="slider" class="nivoSlider">
[...]
$('#slider').nivoSlider({

ids sollten unique sein sonst führt es zu diesen problemen.

[kukki]

Ja, klar doch, jetzt wo Du mich drauf aufmerksam machst, weiß ich auch wieder, was ich damals noch ändern wollte. Ein fortlaufende ID-Nummer sollte das lösen, habe ich aber wegen der "Unwichtigkeit" liegen gelassen und dann ist es halt untergegangen. Danke

Bleibt nur noch die Frage, ob man diese Nummer jetzt in V.1.8.4 ff auch ohne weiteres im CP Bilder<div>/ Bilderspezial unterbekommt, denn in nicht allen CP-Templates funktionieren die {RT}-Einstellungen gleich.

[Oliver Georgi]

Klasse nutzen.

Code: Select all

$('.nivoSlider').nivoSlider({});

[kukki]

Danke Oliver für den Tipp. Toll wenn das Allereinfachste die erwünschte Lösung bringt
Jetzt funktioniert alles wie gewollt!

[kukki]

Habe gerade neustes Update gefahren V 1.8.5 vom 5.1.2017
Problem das Plugin NIVO-Slider lauft mit Jquerry 3.1.1 nicht. Bei "jQuerry 3.1.1 + Migrate 3.0.0" funktiniert alles wie gehabt.
Kann mir jemand einen Hinweis geben, was da mit einem Mal anders sein soll

Es wird eine Fehlermeldung im Firebug angezeigt.



Bei der Vorgängerversion mit Migrate gibt es keine Meldungen.

[Oliver Georgi]

https://jquery.com/upgrade-guide/3.0/#s ... nt-changes

Einfach jQuery 2.2.4 weiter benutzen, wenn man veraltete jQuery Scripts benutzt. Oder ganz und gar bei 1.12.4 bleiben. Dann braucht es auch kein Migrate.

[Uwe367]

Problem das Plugin NIVO-Slider lauft mit Jquerry 3.1.1 nicht.

Kann ich nicht nachvollziehen.
Laut Github ist Nivo Version 3.2 die neueste https://github.com/Codeinwp/Nivo-Slider-jQuery
Und die läuft derzeit im Slidermodul sogar in der 1.9.0 beta 2 unter PHP 7 und jquery 3.1.1.
Zu sehen hier:
http://test.uwe367.de/
Ist zwar nur Standarttemplate, aber zum testen genügts.

Oder hast du eine neuere Version als die 3.2?

[Oliver Georgi]

wer weiß, was kukki noch im Einsatz hat … auf jeden Fall kein phpwcms-spezifisches Problem

[Uwe367]

Das einzige Problem, welches ich mit dem Nivo-Slider und einigen, anderen Plugins kenne ist, daß man in der Hauptvorlage bei der ausgewählten Bibliothek den Haken bei immer laden setzen muß sonst tut sich im FE gar nichts.

[Oliver Georgi]

Wenn jQuery benötigt wird, aber nicht immer, dann im Template, welches für z.B. den NivoSlider zuständig ist, schlicht folgendes nutzen:

Code: Select all

<!-- JS:initJSLib -->

Ich selbst lade meist immer, da in aller Regel Bootstrap und sowieso JavaScript Funktionalität oder Custom JS im Einsatz.

[Uwe367]

Ich selbst lade meist immer, da in aller Regel Bootstrap und sowieso JavaScript Funktionalität oder Custom JS im Einsatz.

Ist auch meine Vorgehensweie. So bin ich sicher daß ich nicht aus Versehen das laden der JS Bibliothek vergessen habe oder irgendwo in einem Template der Aufruf dafür fehlt und dann unnötiger Weise auf Fehlersuche gehe. Ist mir mal passiert. 2 Stunden gesucht und dann die Ernüchterung
Seiteher nur noch immer laden.