NivoSlider не работает гладко на magento

Я пытаюсь реализовать nivoslider на моей установке magento. Я просто копирую вставить то, что в загрузить демо-пакет (который я тестировал на своем firefox и работал очень гладко) в magento. Я сделал всю домашнюю работу

  • скопируйте все необходимые файлы JS и css в папку кожи моей темы
  • добавить файлы на страницу.в 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>
    
  • скопируйте раздел HTML слайдера на странице magento cms

enter image description here

  • и, наконец, добавить jQuery(document).ready(function($) { $('#slider').nivoSlider(); }); в my_own-custom_script.js

Он работает, но не гладко. Иногда просто замолчал на некоторое время. В других случаях один из слайдов изображения не отображается. Анимация также немного мерцает. Навигация слайдера (кнопка prev-next и круг в нижней части слайдера) иногда не реагирует на мое событие click. Что делает меня смущает то, что все эти симптомы просто случаются иногда в другой раз он хорошо работает.

о, еще одна вещь, этот nivoslider также всегда делает мой firefox сбой каждый раз, когда я проверяю один из его элементов с firebug.

может кто-нибудь дать мне подсказку, почему это происходит? Я подозреваю, что это связано с конфликтом с прототипом сценария magento (хотя все это уже работает в режиме noconflict)

2 ответов


после некоторых раскопок я нашел решение... и решение очень простое: так же просто, как добавить один маленький символ подчеркивания в скрипт nivoslider. просто замените эту строку на скрипт nivoslider:

$.fn._reverse = [].reverse;

этой

$.fn._reverse = []._reverse;

и вот объяснение для тех, кто нуждается в объяснении:

Если вы увидите список ошибок (с firefox, ctrl+shift+j) при использовании nivoslider, вы увидите, что прототип получил слишком много рекурсии. Это объяснение этой "слишком большой рекурсии" прототипа:прототип слишком много проблем рекурсии.

использование обратной функции на прототипе привело к конфликту с NivoSlider. ребята на github нашли эту проблему и дают одно быстрое решение здесь: https://github.com/gilbitron/Nivo-Slider/issues/35

эта проблема сводит меня с ума, потому что нет достаточного ресурса везде (попробуйте google, и вы не найдете прямого ответа на это проблема.) Поэтому я надеюсь, что мой вопрос вместе с моим собственным ответом может помочь другим людям там с тем же случаем со мной:)


начал видеть это недавно на сайте, который был в dev некоторое время. Видя:

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

в консоли в Chrome. объект.расширять.обратная деталь ссылок линия прототип 881. Я не большой парень javascript, поэтому эта деталь лучше подходит для кого-то другого.

/кожа/фронтэнда/газа/по умолчанию/и JS/jQuery, которые.ниво.ползунок.упаковка.js загружен, поэтому это должен быть какой-то конфликт, возможно, с новой версией jQuery или чем-то еще.

Я полагаю, вы могли бы переключитесь на другой слайдер. Недавно я нашел bx slider и ему понравилось, хотя еще не использовал его в проекте Magento, поэтому не могу говорить о совместимости, и вы все равно его исправили, так что...