‹‹ cycle homejQuery Cycle Plugin - addSlide Demo 3

The markup for the slideshow above contains only two slides initially:

<div id="slideshow" class="pics">
    <img src="images/beach1.jpg" width="200" height="200" />
    <img src="images/beach2.jpg" width="200" height="200" />
</div>

Note that slideshows must initially contain at least two slides!

The script on this page uses the 'before' callback to access Cycle's options object which exposes the addSlide function:

<script type="text/javascript">

    var stack = [];

    // preload images into an array; we will preload beach3.jpg - beach8.jpg
    for (var i = 3; i < 9; i++) {
        var img = new Image(200,200);
        img.src = 'images/beach' + i + '.jpg';
        $(img).bind('load', function() {
            stack.push(this);
        });
    } 

    // start slideshow
    $('#slideshow').cycle({
        timeout:  2000,
        before:   onBefore
    });

    // add images to slideshow
    function onBefore(curr, next, opts) {
        if (opts.addSlide) // <-- important!
            while(stack.length)
                opts.addSlide(stack.pop()); 
    };

</script>

Note that images are not loaded sequentially by the browser so the technique shown above will add images to the slideshow randomly (as they become available). If you need your images added in a specific order you would need to change the logic above to wait for all images to load, sort the array as needed, and then add the new images all at once.