Прогрессивная загрузка jQuery cycle2 программно

Question

Я использую цикл 2 и устанавливаю его программно в отдельном файле scripts.js. До момента добавления прогрессивной загрузки все слайдеры работают хорошо. У меня есть несколько ползунков на странице, поэтому я настроил это следующим образом:

$('.slider').each(function () {
    var $this = $(this);
    $this.cycle({
        fx: 'scrollHorz',
        slides: '> a',
        sync: true,
        progressive: slides,
        speed: 'fast',
        timeout: 0,
        autoHeight: 'container',
        next: $this.next('.slider-navigation').find('.next'),
        prev: $this.next('.slider-navigation').find('.prev'),
        loader: true
    });
});

И моя HTML-разметка, для каждого слайдера, в качестве примера:

<div class="slider">
    <a href="/">
        <img src="example.jpg">
    </a>
    <script class="other-slides" type="text/cycle">
        var slides = [
            "<a href=" / "><img src="
            another - example.jpg " /></a>",
            "<a href=" / "><img src="
            another - example.jpg " /></a>",
            "<a href=" / "><img src="
            another - example.jpg " /></a>"
        ];
    </script>
</div>

Однако теперь, когда я загружаю страницу, моя консоль заявляет: ReferenceError: slides is not defined что имеет смысл как cycle init находится в script.js, и эта разметка находится на другой странице, но как я могу заставить это работать, или есть лучший способ? Помните, что на странице есть несколько ползунков.

Спасибо R

Answer 1

В прогрессивной демонстрации Cycle 2 на теге скрипта есть идентификатор, который используется для ссылки на дополнительные слайды для постепенной загрузки. Очевидно, что вы не можете использовать идентификатор, потому что вы имеете дело с несколькими слайд-шоу. Сначала я подумал, что вы можете просто применить подобный подход к тому, как вы обрабатывали предыдущий и следующий элементы управления. Однако если вы посмотрите на строку 1374 источника Cycle 2, вы увидите, что он использует $() функция и просто ожидает строку селектора. К счастью, он также примет функцию, которая позволит нам имитировать подход, используемый при передаче строки.

Вам нужно следить за цитированием атрибутов в ваших данных JSON. Каждый слайд должен быть заключен в двойные кавычки с одинарными кавычками, используемыми для атрибутов. Также это не сработает, если вы назначите JSON переменной в теге скрипта.

Вот ваш обновленный JS:

$('.slider').each(function () {
    var $this = $(this);
    $this.cycle({
        fx: 'scrollHorz',
        slides: '> a',
        sync: true,
        progressive: function() {
           var slides = $('.other-slides', $this).html();
           return $.parseJSON( slides );
        },
        speed: 'fast',
        timeout: 0,
        autoHeight: 'container',
        next: $this.next('.slider-navigation').find('.next'),
        prev: $this.next('.slider-navigation').find('.prev'),
        loader: true
    });
});

и HTML:

<div class="slider">
    <a href="/">
        <img src="example.jpg">
    </a>
    <script class="other-slides" type="text/cycle">
    [
        "<a href='/'><img src='example2.jpg' /></a>",
        "<a href='/'><img src='example3.jpg' /></a>",
        "<a href='/'><img src='example4.jpg' /></a>"
    ]
    </script>
</div>

А вот и скрипка: http://jsfiddle.net/N7tgL/

Answer 2

Спасибо, ребята, отлично поработали... однако я нашел, что

next: '> .next',
prev: '> .prev',

работал для поиска элементов с помощью селектора класса next или prev.