jQuery cycle2 progressive loading programmatically

Question

I am using cycle2, and set it up programmatically in a separate scripts.js file. Up to the point before adding progressive loading, the sliders all work well. I have multiple sliders on the page, so have set this up as follows:

$('.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
    });
});

And my HTML markup is, for each slider, as an example:

<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>

However, now when I load the page, my console states: ReferenceError: slides is not defined which makes sense as the cycle init is in script.js and this markup is on another page, but how can I possibly make this work, or is there a better way? Remember there's multiple sliders on the page.

Thanks, R

Answer 1

In the Cycle 2 progressive demo there's an ID on the script tag which is used to reference the additional slides to load progressively. Obviously you can't use an ID because you're dealing with multiple slideshows. At first I thought you could just apply a similar approach to how you've handled the prev and next controls. However if you look at line 1374 of the Cycle 2 source you'll see that it's using the $() function and is just expecting a selector string. Fortunately it will also accept a function which will allow us to mimic the approach used when passing a string.

You need to watch the quoting of attributes in your JSON data. Each slide should be wrapped in double quotes with single quotes used for attributes. Also it won't work if you assign the JSON to a variable in your script tag.

Here's your updated 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
    });
});

and 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>

And here's a fiddle: http://jsfiddle.net/N7tgL/

Answer 2

Thanks guys worked great... however, I did find that

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

worked for finding elements with class selector next or prev.