$(document).ready(function() { 
    // start slideshow 
    $('#slideshow').cycle({ 
        fx:      'fade', 
        timeout:  4000, 
        before:   onBefore 
    }); 
     // set totalSlideCount var; // we'll be adding slides beach3.jpg - beach8.jpg to the slideshow 
    var totalSlideCount = 7; 
     
    function onBefore(curr, next, opts) { 
        // on the first pass, addSlide is undefined (plugin hasn't yet created the fn); 
        // when we're finshed adding slides we'll null it out again 
        if (!opts.addSlide) 
            return; 
 
        // 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 
             
        var currentImageNum = parseInt(next.src.match(/fp(\d)/)[1]); 
        //alert (currentImageNum);     
        if (currentImageNum == totalSlideCount) { 
            // final slide in our slide slideshow is about to be displayed 
            // so there are no more to fetch 
            opts.addSlide = null; 
            return; 
        } 
         
        // add our next slide 
        opts.addSlide('<img src="images/fpage/fp'+(currentImageNum+1)+'.jpg" width="1000" height="504" />'); 
    }; 
});