[SOLVED]Nivo Slider jQuery Plugin for phpwcms R507

[kukki]

Bevor ich jetzt irgendwelche Updates auf R529 fahre, möchte ich erst einmal auf eine Sache aufmerksam machen, die mich heute Nerven gekostet hat. Wer kann mir da bitte weiterhelfen

@UWE: erst einmal danke für's Drüberblicken, wie üblich - Unterstrich und Minusstrich verwechselt

Auf Basis des Threads http://forum.phpwcms.org/viewtopic.php? ... hilit=nivo wurden das Template und die dazugehörigen CSS/ JS erstellt:

http://www.phpwcms-howto.de/wiki/doku.p ... rt-section habe ich in als cp_trig_sort_section_v13.php /template/inc_script/frontend_init/ abgelegt!

Code: Select all

 <!--IMAGE_SETTINGS_START//-->
    ; InfoText render: plain, html, markdown, textile
    text_render   = html
    <!--IMAGE_SETTINGS_END//-->
    <!--IMAGES_HEADER_START//-->
    <!--SORT_INTO_NEW_BLOCKS_V13//-->
    <div class="slider-wrapper theme-default">[CP_TRIG_DEFINITION]
    [BLOCK_01X_PREFIX]
    <div id="slider" class="nivoSlider">[/BLOCK_01X_PREFIX][BLOCK_01X_SUFFIX]</div>
    [/BLOCK_01X_SUFFIX]
    [CLASS_01X_FIRST][/CLASS_01X_FIRST][CLASS_01X_LAST][/CLASS_01X_LAST]
    [BLOCK_02X_PREFIX][/BLOCK_02X_PREFIX][BLOCK_02X_SUFFIX][/BLOCK_02X_SUFFIX]
    [CLASS_02X_FIRST] class="active"[/CLASS_02X_FIRST][CLASS_02X_LAST][/CLASS_02X_LAST][/CP_TRIG_DEFINITION]
    [CP_TRIG_WRAP_CONTENT]<!--IMAGES_HEADER_END//--><!--IMAGES_ENTRY_START//-->[CP_TRIG_CONTENT]
    [BLOCK_01X][IMAGE_URL]<a href="{IMAGE_URL}">[/IMAGE_URL]<img src="{THUMB_REL}" alt="{THUMB_NAME} [COUNTX]" title="#{THUMB_ID}" />[IMAGE_URL]</a>[/IMAGE_URL][/BLOCK_01X]
    [BLOCK_02X][INFOTEXT]
       <div id="{THUMB_ID}" class="nivo-html-caption">{INFOTEXT}</div>[/INFOTEXT][/BLOCK_02X]
    [/CP_TRIG_CONTENT]<!--IMAGES_ENTRY_END//--><!--IMAGES_ENTRY_SPACER_START//--><!--IMAGES_ENTRY_SPACER_END//--><!--IMAGES_ROW_SPACER_START//--><!--IMAGES_ROW_SPACER_END//-->
    
    <!--IMAGES_FOOTER_START//-->
    [/CP_TRIG_WRAP_CONTENT]
    </div>

<!-- JS: {TEMPLATE}lib/jquery/plugin/nivoSlider/jquery.nivo.slider.pack.js -->
<!-- JS: {TEMPLATE}lib/jquery/plugin/nivoSlider/jquery.nivo.slider.js -->
<!-- JS: 
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 3000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true, // Next & Prev navigation
        controlNav: true, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        randomStart: false, // Start on a random slide
        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
    });
});
-->

    <!-- CSS: {TEMPLATE}inc_css/specific/jquery/nivo/nivo-slider.css -->
    <!-- CSS: {TEMPLATE}inc_css/specific/jquery/nivo/themes/default/default.css -->
<!--IMAGES_FOOTER_END//-->    

Nachdem ich den Bilderslider in Aktion gesetzt habe, der auch erst einmal anlief, kam aber die Überraschung


Bei so gut wie allen(?) Übergangseffekt (siehe Bild) spielen alle Browser nicht mit, es entsteht eine ellenlange Seite mit weißem Hintergrund. Im Moment bin ich etwas konstaniertdadrüber

Das kann man sich hier anschauen!

Unter Firebug findet man einen "kleinen" Fehler, der da lautet:

--> Zeile 151: div Attribut id has invalid value "142"!

Dann stellte ich noch fest, dass die Bildbeschreibung für Bild1 auf alle Bilder verteilt wird.

[juergen]

Wenn du die slider funktion mehrfach im Header einbindest ist die Vielfalt der Blüten erheblich. Nimm doch mal den gepackten raus ....

[kukki]

Habe ich gemacht, mit dem Ergebnis, dass es trotzdem diese "komischen Bilder" mit ellenlangen weißen Seiten gibt!
Damit hat sich das mit den Bildunterschriften erledigt! Ich konnte leider nicht erkennen, dass die nivo*.pack.js und die nivo*.js gleich sind

Dafür sind die Fehler bei der Attribut-ID jetzt mehr geworden und die ellenlange Seite triit bei nur noch wenigen Slidereffekten auf, vor allem siehe oben!

[Uwe367]

Ich habe mal in der Doku des Sliders nachgeschaut. Kanns evtl. sein daß der Slider mit jquery 1.8 ein Problem hat? In der Doku wird scheinbar noch jquery 1.7 verwendet.
Siehe hier: http://dev7studios.com/nivo-slider/#/documentation und dann "How do I use the Nivo Slider jQuery plugin?"
Ist nur eine Vermutung aber nen Versuch ists wert....

Gruß
Uwe

[kukki]

Hallo Uwe, das hat gar nichts zu sagen. Es WAR der alte alias-Name der Seitenstruktur, absolut unbedeutend hierfür.

Beim Beobachten der Übergangseffekte ist dieser mit den senkrechten Streifen der auslösende Punkt mit den ellenlangen weißen Seiten. Ein Wechsel zu jQuery 1.7 brachte keine Änderung/ Verbesserung

[Uwe367]

Ich kann momentan leider nicht reinschauen da mein Internetzugang ne Störung hat, aber dann gehe ich mal davon aus daß es nun klappt?!?

[kukki]

Ich kann momentan leider nicht reinschauen da mein Internetzugang ne Störung hat, aber dann gehe ich mal davon aus daß es nun klappt?!?

Da hat sich nichts verändert, wie oben geschrieben, war das ein belangloser alias-Name der Seitenstruktur!

[Uwe367]

Also auf meinem Localhost läuft der Slider problemlos, aber ich erhalte einige notices.....

Code: Select all

Notice: Undefined offset: 1 in E:\xampp\htdocs\phpw2\template\inc_script\frontend_init\cp_trig_sort_section_v13.php on line 85
Notice: Undefined offset: 2 in E:\xampp\htdocs\phpw2\template\inc_script\frontend_init\cp_trig_sort_section_v13.php on line 85
Notice: Undefined offset: 1 in E:\xampp\htdocs\phpw2\template\inc_script\frontend_init\cp_trig_sort_section_v13.php on line 79
Notice: Undefined offset: 3 in E:\xampp\htdocs\phpw2\template\inc_script\frontend_init\cp_trig_sort_section_v13.php on line 85
Notice: Undefined offset: 1 in E:\xampp\htdocs\phpw2\template\inc_script\frontend_init\cp_trig_sort_section_v13.php on line 79
Notice: Undefined offset: 1 in E:\xampp\htdocs\phpw2\template\inc_script\frontend_init\cp_trig_sort_section_v13.php on line 79

Ich werd den gleich mal auf meinem Server einbauen und dann mal schauen ob der läuft....

[kukki]

Und was ist nun anders daran? Sollte dies an meiner Version liegen?

[kukki]

Nach einigen Änderungen und Test und in Zusammenarbeit mit UWE steht das fertige Teil als Download zur Verfügung und kann frei genutzt werden.
Viel Spaß damit und falls Verbesserungen oder Erweiterungen a la effect via pepe dazukommen sollten, lass es uns wissen!

Download hier!

UND

Auf meiner mobilen Testplattform funktioniert die Sache auch sehr gut, klick einfach mal auf "HIER" und vergrößert/ verkleinert einfach mal den Viewport per Hand!

[Uwe367]

Jepp.... die Zusammenarbeit hat Spaß gemacht Kukki Ist doch super daß das Ding nun läuft. Ich habe den Slider noch ein wenig erweitert da die Textattribute

Code: Select all

[TEXT]{TEXT}[/TEXT]

fehlten. Die habe ich, für meinen eigenen Bedarf, nun so angeordnet daß der Text via float nun rechts neben dem Slider erscheint.

[kukki]

Nach <!--IMAGES_HEADER_START//-->

Code: Select all

[TITLE]<h3>{TITLE}</h3>[/TITLE]
[SUBTITLE]<h4>{SUBTITLE}</h4>[/SUBTITLE]
[TEXT]{TEXT}[/TEXT]
</br >

einsetzen, dass war's schon, hatte ich schon drinnen nur halt nicht gefüllt, dafür jetzt!
Und damit funktionieren auch spacebefore/spaceafter

Durch die Verwendung von BOX_L und BOX_R mit entsprechender Breite passt sich der Slider automatisch an die Breite an

[kukki]

Kleine Ergänzung:

um auch auf mobilen Geräten nicht außer Breite zu rutschen, sollte in der /template/inc_css/specific/nivo/default.css ab Zeile 11 ein

Code: Select all

clear: both; 

eingetragen werden!

[kukki]

Kleine Download-Korrektur:

Schreibfehler in Pluginverzeichnis beseitigt und zusätzliche Integrierung [TITLE]-Notation nach <!--IMAGES_HEADER_START//-->

[kukki]

Weitere Änderungen/ Verbesserungen (CSS):
Unter Umstständen wird in einem Tab nur ein Bild mit einer einzigen Textzeile "Umflossen". Dabei ist da Bild größer als der Texthintergrund. Das sieht unprofessional aus und kann mit einer Erweiterung der CSS-Notation in der frontend.css ausgeglichen werden:

Code: Select all

div#accordion div.image-with-text {
    min-height: 170px;
}