Add Slideshow to jQuery Lightbox Plugin

Step 1. First, we added two configuration parameters to the lightbox’s settings:

settings = jQuery.extend({
     // Configuration related to slideshow,
     slideshow: false,
     nextSlideDelay: 7000,
     ...

slideshow – This sets it to display images in slideshow mode or not. Slideshow functionality is turned off by default, of course.
nextSlideDelay – This is a value in milliseconds which sets the period of time for the script to wait before displaying the next image. It is set to 7 seconds, by default.

Step 2. Next, we make a simple add-on to the _initialize() method to start the slideshow if settings.slideshowparameter is turned on:

function _initialize() {
     if(settings.slideshow){
          var tmFunc = function(){ _doSlideShow(); };
          setTimeout(tmFunc, settings.nextSlideDelay);
     }
     ...

Step 3. And implementation of the actual _doSlideShow() function which switches to next image:

function _doSlideShow(){
     settings.activeImage++;
     if(settings.activeImage >= settings.imageArray.length){
          settings.activeImage = 0;
     }
     _set_image_to_view();
     var tmFunc = function(){ _doSlideShow(); };
     if($('#jquery-lightbox').length > 0){
          setTimeout(tmFunc, settings.nextSlideDelay);
     }
}

A few notes about the code:

The lightbox plugin has a variable settings.activeImage which points to the visible image from thesettings.imageArray array. Our function executes every 7 seconds (or any other period of time set via the parameter in the plugin settings), then increases the value of activeImage and calls the _set_image_to_view() method which displays the current image.

 Click the Demo button to view it in action, or click here to download a patched version of the jQuery Lightbox plugin.