Я использую jQuery noconflict, чтобы избежать конфликта плагинов? - PullRequest
Новая
       13

Я использую jQuery noconflict, чтобы избежать конфликта плагинов?

2 голосов
/ 23 июня 2010

ОБНОВЛЕНИЕ: Я обнаружил, что плагин jquery.bxslider сам клонирует и добавляет / дополняет LI, вызывающие проблему.Хотя нет решения, за исключением, возможно, использования другого сценария: (

Мне нужно, чтобы плагины jQuery частично конфликтовали друг с другом, Boxslider (слайдер изображений) и Colorbox (лайтбокс). Оба они работают, но скрипт слайдера каким-то образом рекламирует лайтбокс, поэтому первое и последнее изображения повторяются дважды.

Это легче понять, если взглянуть на пример страницы .

Вы увидите, что на слайдере 3 изображения, но при открытии лайтбокса вы получите 5 изображений.

Я попробовал свойудачи с noconflict(), но это просто остановило что-либо от работы вообще. После некоторого поиска я предполагаю, что есть некоторые проблемы с пространством имен, хотя я понятия не имею, где или как это отладить.

Скрипты, которые яЯ использую: 

<link type="text/css" media="screen" rel="stylesheet" href="assets/css/colorbox.css" />
<script type="text/javascript" src="assets/js/jquery.bxslider2.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#gallery').bxSlider({
        auto: true,
        wrapper_class: 'gallery-holder',
        auto: false,  
        speed: 100,
        pager: true,
        next_text: 'next',
        prev_text: 'back'
    });
}); 
</script>
<script type="text/javascript" src="assets/js/jquery.colorbox-min.js"></script>
<script type="text/javascript">
    $(window).load(function(){
        $("#gallery a[rel='group']").colorbox({maxWidth:"80%", maxHeight:"80%", scalePhotos: true});
    });
</script>

Я пытался поменять порядок, из-за чего только один или оба перестали работать. Я потратил много времени, пытаясь прибить это, так что любая помощь будет многооценили!

Ответы [ 3 ]

3 голосов
/ 10 ноября 2011

Лучше поздно, чем никогда, а? Думаю, я поделюсь своим решением на случай, если кто-нибудь еще столкнется с этой проблемой.

Недавно я использовал комбинацию colorBox / bxSlider и столкнулся с этой проблемой. Когда вы инициализируете bxSlider, он дублирует первый и последний слайды в последнюю и первую позиции (соответственно). Меня не очень интересовало, почему, но я представляю, что это поддерживает циклы. Хотя инициализация colorBox сначала должна была сработать теоретически, что-то в bxSlider стирает $ .data (), который устанавливает colorBox.

Что касается сути, мое быстрое решение состояло в том, чтобы убрать имя класса из дублированных элементов. В setChildrenLayout () вы можете видеть, где элементы пре- / постпендифицированы в двух блоках $ .each (). Все, что вам нужно сделать, это изменить его, чтобы удалить имя класса, который нарушил работу. 

$.each($prependedChildren, function(index) {
    var moddedChild = $(this);
    moddedChild.children().removeClass("removeThisClass");
    $parent.prepend(moddedChild);
});

ПРИМЕЧАНИЕ. Я написал его для работы в моем конкретном случае, возможно, потребуется изменить его, если элементы списка более сложные.

2 голосов
/ 23 июня 2010

Когда вы смотрите на источник для вашей страницы в Firebug, в то время как Slider показывает только три изображения, на самом деле там 5 LI. Селектор, который вы используете для добавления изображений, находит пять элементов. 

console.log($("#gallery a[rel='group']")); // yields....
>> [a.cboxElement B10_02.jpg, a.cboxElement  B10_01.jpg, a.cboxElement  B10_04.jpg, a.cboxElement  B10_02.jpg, a.cboxElement  B10_01.jpg]

Этот массив состоит из пяти элементов, поэтому в colorbox есть 5 изображений.

Глядя на источник, выбранный Curl, до запуска любого JS изначально есть только три изображения: BLADE / B10_02.jpg, B10_04.jpg и B10_01.jpg. Итак, я думаю, цель состоит в том, чтобы увидеть, когда они будут добавлены. Фактические изображения, используемые для цветовой рамки, хранятся в отдельной области, добавленной как первый дочерний элемент, так что же добавляет их в слайдер UL?

Когда вы полностью удалите colorbox и просто инициализируете ползунок, проверьте UL галереи в Firebug. У него три оригинальных LI или пять? Если он имеет пять, colorbox (или что-то еще) по какой-то причине добавляет два других. Если их три, попробуйте заново добавить инициализацию colorbox и посмотрите, есть ли пять, когда вы перезагрузите страницу. Это должно немного сузить вопрос о том, что их добавляет.

дополнение: Из исходного кода видно, что bxSlider намеренно дублирует первый и последний элементы. 

var first = $this.children(':first').clone(); 
var last = $this.children(':last').clone(); 
/*etc, etc */
$this.append(first).prepend(last);

Я бы предложил попробовать запустить плагин colorbox перед Slider. Конечно, сначала он не запустится, если вы измените исходный порядок, поскольку у вас есть document.Ready () на слайдере и window.load () на colorbox. Можете ли вы сделать colorbox в document.ready () перед выполнением Slider?

2 голосов
/ 23 июня 2010

Происходит то, что оба сценария пытаются работать с одними и теми же наборами изображений и просто ломают друг друга.

Noconflict в основном удаляет определение $, поэтому другие библиотеки, использующие $, такие как Prototype, не будут переопределены.

Таким образом, noconflict вам здесь не поможет. Как насчет использования одного из плагинов?

...