‹‹ cycle homejQuery Cycle Plugin - addSlide Demo 6

The markup for the slideshow above contains only one slide initially:

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

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

$(function() {
    // retrieve list of slides from server
    $.getJSON('slidelist.php', startSlideshow);
    
    function startSlideshow(slides) {
        /* server returns an array of slides which looks like this:
        [
            'images/beach2.jpg',
            'images/beach3.jpg',
            'images/beach4.jpg',
            'images/beach5.jpg',
            'images/beach6.jpg',
            'images/beach7.jpg',
            'images/beach8.jpg'
        ]
        */
        
        var totalSlideCount = 1 + slides.length;
        
        var $slideshow = $('#slideshow');
        
        // markup contains only a single slide; before starting the slideshow we 
        // append one slide and prepend one slide (to account for prev/next behavior)
        $slideshow.prepend('<img src="'+slides.pop()+'" />');
        $slideshow.append('<img src="'+slides.shift()+'" />');

        // start slideshow
        $('#slideshow').cycle({
            fx: 'scrollHorz',
            startingSlide: 1,  // start on the slide that was in the markup
            timeout:  0,
            speed:    500,
            prev:    '#prev',
            next:    '#next',
            before:   onBefore
        });
        

        function onBefore(curr, next, opts, fwd) {
            // on Before arguments:
            //  curr == DOM element for the slide that is currently being displayed
            //  next == DOM element for the slide that is about to be displayed
            //  opts == slideshow options
            //  fwd  == true if cycling forward, false if cycling backward
                
            // on the first pass, addSlide is undefined (plugin hasn't yet created the fn yet)
            if (!opts.addSlide)
                return;
                
            // have we added all our slides?
            if (opts.slideCount == totalSlideCount)
                return;

            // shift or pop from our slide array 
            var nextSlideSrc = fwd ? slides.shift() : slides.pop();
            
            // add our next slide
            opts.addSlide('<img src="'+nextSlideSrc+'" />', fwd == false);
        };
    };
});