NivoSlider 在 magento 上运行不顺畅答案

【问题标题】：NivoSlider not working smoothly on magentoNivoSlider 在 magento 上运行不顺畅
【发布时间】：2012-01-04 09:37:13
【问题描述】：

我正在尝试在我的 magento 安装中实现 nivoslider。我只是将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 页面上的滑块 html 部分

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

它运行，但并不顺利。有时幻灯片只是暂停了一会儿。其他时候，一张图片幻灯片不会出现。动画也有点闪烁。滑块导航（prev-next 按钮和滑块底部的那些圆圈）有时对我的点击事件无响应。让我感到困惑的是，所有这些症状只是有时发生，其他时候却运行良好。

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

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

【问题讨论】：

很高兴知道。我还尝试将客户登录页面的 NivoSlide 与雪花 jquery 插件一起运行，这对旧电脑来说是死亡 ^^ 同时我使用 Orbit Slider，它是一个易于使用且快速的 jquery 滑块：zurb.com/playground/orbit-jquery-image-slider唯一的问题是，它不兼容 IE6。
您现在应该可以将其作为答案发布。继续做吧。

标签： javascript jquery magento nivo-slider

【解决方案1】：

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

$.fn._reverse = [].reverse;

到这里

$.fn._reverse = []._reverse;

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

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

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

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

【讨论】：

太棒了，谢谢我遇到了同样的问题，这解决了它
我也遇到了同样的问题。这解决了“递归过多”的问题，但滑块在我的 magento 安装中仍然无法正常运行。它对单击更改幻灯片没有响应，并且动画是断断续续的。仍在寻找完整的解决方案。

【解决方案2】：

最近开始在一个开发了一段时间的网站上看到这个。看到：

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

在 Chrome 的控制台中。 'Object.extend.reverse' 细节参考原型线 881。我不是一个 javascript 人，所以这是一个更适合其他人的细节。

/skin/frontend/gas/default/js/jquery.nivo.slider.pack.js 已加载，所以它一定是一些冲突，可能与新的 jQuery 版本或其他东西。

我想你可以切换到不同的滑块。我最近发现了 BX 滑块并喜欢它，虽然还没有在 Magento 项目中使用它，所以不能说兼容性而且你已经修复了它，所以......

【讨论】：