javascript - NivoSlider 在 magento 上运行不流畅

Question

我正在尝试实现 nivoslider在我的 magento 安装上。我只是复制粘贴 downloaded demo package 中的内容(我已经在我的 firefox 上测试过并且运行非常流畅)到 magento。我做了所有的功课

• 将所有需要的 js 和 css 文件复制到我的主题的皮肤文件夹中

• 在 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>
  

• 复制 magento cms 页面上的 slider html 部分

• 最后添加 jQuery(document).ready(function($) { $('#slider').nivoSlider(); }); 到 my_own-custom_script.js

它运行，但不流畅。有时幻灯片只是停了一会儿。其他时候，其中一张图片幻灯片不会出现。动画也有点闪烁。 slider 导航(上一个-下一个按钮和 slider 底部的那些圆圈)有时对我的点击事件没有响应。让我感到困惑的是，所有这些症状只是有时发生，其他时候运行良好。

哦，还有一件事，每次我用 firebug 检查它的一个元素时，这个 nivoslider 总是让我的 firefox 崩溃。

谁能给我一些线索，为什么会这样？我怀疑这与 magento 的 Prototype 脚本冲突有关(尽管它已经在无冲突模式下运行)

Answer 1

经过一番挖掘，我找到了解决方案……而且解决方案非常简单:就像在 nivoslider 脚本中添加一个小下划线字符一样简单。只需在 nivoslider 脚本中替换这一行:

$.fn._reverse = [].reverse;

对此

$.fn._reverse = []._reverse;

这里是给需要解释的人的解释:

如果您在使用 nivoslider 时看到错误列表(使用 firefox，ctrl+shift+j)，您会发现原型(prototype)递归过多。这是对 Prototype 的“太多递归”的解释:prototype too much recursion problem .

在 Prototype 上使用 reverse 函数与 NivoSlider 发生冲突。 github上的家伙发现了这个问题并在这里给出了一个快速解决方案: https://github.com/gilbitron/Nivo-Slider/issues/35

这个问题把我逼疯了，因为到处都没有足够的资源(尝试用谷歌搜索一下，你会找不到这个问题的直接答案)。所以我希望我的问题以及我自己的回答可以帮助其他和我有同样情况的人:)