Jquery Cycle2 Progessive Loading displaying <script> tag

Question

I am trying to setup jQuery cycle2 to progressively load a set of images. There are multiple .slider objects on the page which need to load images progressively.

This is the HTML

 <li class="slider"><img title="Company Name" alt="Company Name" src="/photos/listings/company-name6.jpg"> <script class="other-slides" type="text/cycle">[<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide.jpg'> <img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide1.jpg'> <img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide2.jpg'> <img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide3.jpg'> <img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide4.jpg'> ]</script></li>

This is the JavaScript

 $('.slider').each(function () { var $this = $(this); $this.cycle({ slides: '> img', sync: true, progressive: function() { var slides = $('.other-slides', $this).html(); return $.parseJSON( slides ); }, speed: 1500, timeout: 4000, loader: true }); });

The initial picture is shown and then it cycles and shows this Result

Answer 1

You're almost there. If you look at the progressive example on the cycle2 website it notes that the script tag needs to contain a JSON array of the slides to be loaded. Each individual slide needs to be wrapped in double quotes and the slides separated with a comma.

Here's the updated JSON for the progressive slides:

<script class="other-slides" type="text/cycle">
[
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide.jpg'>",
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide1.jpg'>",
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide2.jpg'>",
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide3.jpg'>",
    "<img title='Ad 6 Auto wide' alt='Ad 6 Auto wide' src='/photos/listings/ad-6-auto-wide4.jpg'>"
]
</script>

And here's a working fiddle .