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

Question

Я пытаюсь реализовать nivoslider в моей установке magento. Я просто копирую вставить то, что находится в загруженном демонстрационном пакете (которое я протестировал на моем 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>
  

• скопировать секцию html слайдера на страницу mamsto cms

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

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

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

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

Answer 1

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

$.fn._reverse = [].reverse;

к этому

$.fn._reverse = []._reverse;

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

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

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

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

Answer 2

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

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, поэтому не могу говорить о совместимости, и вы все равно исправили его, так что ...