[SOLVED]Nivo Slider jQuery Plugin for phpwcms R507

Bitte alle templatebezogenen Beiträge in diesem Forum veröffentlichen.
User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

[SOLVED]Nivo Slider jQuery Plugin for phpwcms R507

Post by kukki » Tue 12. Mar 2013, 19:40

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 :oops: :mrgreen:

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 :!:
Image

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 :evil:

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. :|
Last edited by kukki on Sun 17. Mar 2013, 07:27, edited 1 time in total.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
juergen
Moderator
Posts: 4553
Joined: Mon 10. Jan 2005, 18:10
Location: Weinheim
Contact:

Re: Nivo Slider jQuery Plugin for phpwcms R507

Post by juergen » Tue 12. Mar 2013, 19:55

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

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Nivo Slider jQuery Plugin for phpwcms R507

Post by kukki » Tue 12. Mar 2013, 20:03

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 :roll:

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!
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
Uwe367
Posts: 988
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Re: Nivo Slider jQuery Plugin for phpwcms R507

Post by Uwe367 » Tue 12. Mar 2013, 21:09

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

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Nivo Slider jQuery Plugin for phpwcms R507

Post by kukki » Wed 13. Mar 2013, 07:20

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

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 :|
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
Uwe367
Posts: 988
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Re: Nivo Slider jQuery Plugin for phpwcms R507

Post by Uwe367 » Wed 13. Mar 2013, 07:45

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

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Nivo Slider jQuery Plugin for phpwcms R507

Post by kukki » Wed 13. Mar 2013, 10:03

Uwe367 wrote: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! :?
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
Uwe367
Posts: 988
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Re: Nivo Slider jQuery Plugin for phpwcms R507

Post by Uwe367 » Wed 13. Mar 2013, 15:58

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....

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: Nivo Slider jQuery Plugin for phpwcms R507

Post by kukki » Thu 14. Mar 2013, 07:46

Und was ist nun anders daran? Sollte dies an meiner Version liegen?
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: [SOLVED]Nivo Slider jQuery Plugin for phpwcms R507

Post by kukki » Sun 17. Mar 2013, 10:20

Nach einigen Änderungen und Test und in Zusammenarbeit mit UWE :mrgreen: 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!

:idea: UND :idea:

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! :D
Last edited by kukki on Tue 23. Apr 2013, 09:33, edited 5 times in total.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
Uwe367
Posts: 988
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Re: [SOLVED]Nivo Slider jQuery Plugin for phpwcms R507

Post by Uwe367 » Sun 17. Mar 2013, 11:10

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.

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: [SOLVED]Nivo Slider jQuery Plugin for phpwcms R507

Post by kukki » Sun 17. Mar 2013, 11:45

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 :lol: 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 :idea:
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: [SOLVED]Nivo Slider jQuery Plugin for phpwcms R507

Post by kukki » Wed 27. Mar 2013, 15:02

:idea: 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!
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: [SOLVED]Nivo Slider jQuery Plugin for phpwcms R507

Post by kukki » Sun 21. Apr 2013, 12:13

Kleine Download-Korrektur:

Schreibfehler in Pluginverzeichnis beseitigt und zusätzliche Integrierung [TITLE]-Notation nach <!--IMAGES_HEADER_START//--> :!:
Last edited by kukki on Tue 23. Apr 2013, 09:32, edited 1 time in total.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

User avatar
kukki
Posts: 1667
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: [SOLVED]Nivo Slider jQuery Plugin for phpwcms R507

Post by kukki » Tue 23. Apr 2013, 09:32

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:

Image

Code: Select all

div#accordion div.image-with-text {
    min-height: 170px;
}
Last edited by kukki on Wed 24. Apr 2013, 08:46, edited 1 time in total.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.0 RC2
kukki's SpIeLwIeSe V.1.9.8 R549 responsive

Post Reply