Плагин Jquery Cycle - Большая проблема с загрузкой изображений Ajax - PullRequest
1 голос
/ 08 февраля 2011

У меня проблема с подключением Jquery Cycle.

Я динамически загружаю через Ajax изображения галереи.

Когда я нажимаю кнопки рядом или в галерее,последовательность не работает правильно.

Иногда класс activeSlide не изменяет элемент или элемент галереи пропускается.

Если я обновляю страницу, она работает правильно.

Когда я выполняю вызов ajax и меняю изображения в галерее, я уничтожаю плагин до и после его повторного объявления.

ЕСЛИ я правильно установил тайм-аут для автоматического скольжения.

Я выкладываю код.

Кто-нибудь может мне помочь?Уже 3 дня я пытаюсь найти решение: (((((((

Спасибо, Давиде.

Это мой код:

success: function(data){

    $('#imgcaption').cycle('destroy');//Before load data I destroy the gallery

    $('#dettaglio #imgcaption').empty();//I clean the div's
    $('#dettaglio #nav').empty();

            //I insert the new Images
            $.each(data.foto, function(index, value){
            $('#imgcaption').append('<div><img src="' + value + '" alt="" /></div>');           
    });

            //I redeclare the Cycle 
    $('#imgcaption').cycle({
        timeout: 0,
        fx: 'scrollHorz',
        speed: 500,
        pager: '#nav',
        pagerAnchorBuilder: function(idx, slide) { 
            return '<a href="#"></a>'; 
            }
    });

1 Ответ

0 голосов
/ 03 июня 2011

У меня была такая же проблема.Очевидно, jQuery Cycle по-прежнему видит старые элементы DOM после загрузки ajax.Поэтому, когда вы собираетесь применить .cycle () к новому AJAX DOM, JQuery Cycle связывает его как с новым DOM от AJAX, так и со старым DOM, который был «удален».

Вот почему ваша нумерация страницвсе испорчено (точнее, первый набор ссылок на страницы ссылается на старый DOM, а последующий набор ссылается на новый AJAX DOM).

Таким образом, исправление состоит в том, чтобы вручную удалить элементы DOM, связанные сцикл после того, как вы выполните свой .cycle ('destroy')

$(".cycleSelector").remove();
$(".pagerSelector").remove();

Или в вашем случае:

$("#imgcaption").remove();
$("#nav").remove();

Надеюсь, это поможет!Есть много сообщений в Интернете по этому вопросу без предлагаемых решений.Теперь у нас есть один.:)

...