NivoSlider not working smoothly on magento

Question

I'm trying to implement nivoslider on my magento installation. I just copy paste what's in the downloaded demo package (which I've tested out on my firefox and run very smooth) to the magento. I did all the homework

• copy all the required js and css files to my theme's skin folder

• add those files on page.xml

  <reference name="head">
    <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
    ...
    <action method="addCss"><stylesheet>css/nivo-slider.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/themes/default/default.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/themes/default/pascal.css</stylesheet></action>
    <action method="addCss"><stylesheet>css/themes/default/orman.css</stylesheet></action>
    <action method="addItem"><type>skin_js</type><name>js/jquery-1.6.2-no-conflict.js</name><params/></action>
    ...
    <action method="addItem"><type>skin_js</type><name>js/jquery.nivo.slider.pack.js</name><params/></action>
    <action method="addItem"><type>skin_js</type><name>js/my_own_custom_script.js</name><params/></action>
    ...
  </reference>
  

• copy the slider html section on magento cms page

• and finally add jQuery(document).ready(function($) { $('#slider').nivoSlider(); }); to my_own-custom_script.js

It runs, but not smoothly. Sometimes the slide just paused for a while. The other times, one of the image slide won't showed up. The animation is also a little bit flickering. The slider navigation (the prev-next button and those circle on the bottom of the slider) sometimes get unresponsive on my click event. What makes me confused is, all those symptoms just happen sometimes, some other time it runs well.

oh, one more thing, this nivoslider also always make my firefox crash everytime I inspect one of its element with firebug.

Could anyone give me some clue, why is this happening? I suspect this has something to do with the conflict with magento's Prototype script (although it all already runs in noconflict mode)

Answer 1

after some digging, I found the solution... and the solution is very simple: as simple as adding one little underscore character to nivoslider script. just replace this line on nivoslider script:

$.fn._reverse = [].reverse;

to this

$.fn._reverse = []._reverse;

And here is the explanation for those who need explanation:

if you see the error listing (with firefox, ctrl+shift+j) while using nivoslider, you will see that the prototype got too much recursion. This is the explanation of that "too much recursion" of Prototype: prototype too much recursion problem.

Usage of reverse function on Prototype has made conflict with NivoSlider. guys on github found this problem and give one quick solution here: https://github.com/gilbitron/Nivo-Slider/issues/35

this problem has drive me crazy, for there are no sufficient resource everywhere (try google it out and you'll find no direct answer to this problem). So I hope my question, along with my own answer could help other people out there with the same case with me :)

Answer 2

Started seeing this recently on a site that's been in dev for awhile. Seeing:

Uncaught RangeError: Maximum call stack size exceeded
Object.extend.reverse

in the console in Chrome. the 'Object.extend.reverse' detail references prototype line 881. I'm not much of a javascript guy, so this is a detail better suited for someone else.

/skin/frontend/gas/default/js/jquery.nivo.slider.pack.js is loaded in , so it's gotta be some conflict, maybe with new jQuery version or something.

I suppose you could switch to a different slider. I recently found BX slider and like it, though haven't used it on a Magento project yet, so can't speak for compatibility and you've fixed it anyway, so...