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/