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

Question

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

0

Я использую цикл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

John the Painter 22 март 2014, в 17:33

Источник

Теги:

javascript

jquery

jquery-cycle

jquery-cycle2

2 ответа

0

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

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

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

tyberius7 20 авг. 2014, в 14:34

Ещё вопросы

Dylan · Accepted Answer · 2014-03-27T04-45-00.000Z

В прогрессивной демонстрации 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/

Спасибо тебе большое за это. Отличный ответ и объяснение. Я еще не тестировал его с моим кодом, но уверен, что это сработает. Большое спасибо.