Subscribe to our RSS

How to Add Slideshow to jQuery Lightbox Plugin

Tags: , ,

How to Add Slideshow to jQuery Lightbox Plugin

This tutorial explains how to extend a jQuery Lightbox plugin (by Leandron Vieira Pinho) to have a slideshow.

We previously built a CMS driven website for a client which contains several large photo galleries that use a lightbox effect. Today, the client requested that we add slideshow functionality to the existing plugin to allow automatic switching between photos instead of having visitors click the Next button to view the next item in the gallery.

At first, we suggested to our client to use a different script (a script that already has slideshow features). But since the client needed this “yesterday” :) and he also wants to continue using the current plugin because it’s already proven to work well with his CMS, he asked that we find a way to implement it using the existing plugin. So, in this tutorial we decided to share our experience extending jQuery Lightbox plugin to have basic slideshow functionality.

Okay…we had 10 minutes, we don’t want to disappoint the client, and we have code from a 3rd party plugin that we’ve never seen before ;). Well, at first our idea was to build our extension on top of the existing code, but the jQuery Lightbox has been created as a single object with private methods which made this idea useless. We had no choice but to make changes to the lightbox.js (sorry Leandron ;)). Here we go.

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.slideshow parameter 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 the settings.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.

That’s it ;) Click the Demo button to view it in action, or click here to download a patched version of the jQuery Lightbox plugin. It’s a quick mod and saved time for both us and our client. Hopefully, it will save others some time too.

Janus

June 6, 2011

Great!, except:
It does not reset the timer on a manual prev/next button click. Also, pausing on mouse hover above the image should be better.
Of course, I should not complain but extend….

Jules

February 24, 2011

I so much enjoyed your tutorial.
Do you know how i can learn to build my own slide show from scratch? I’m tired of copy and pasting others’ work.

Thank you

Shuriken

December 7, 2010

This is great… now I am trying to set it so that it won’t be a slideshow. I am interested in the static mouse over and click to zoom effect.
Thank you!

Stefan

September 11, 2010

Hello!
Nice component!
Is it possible to add a pause function?
I figured out how to add a function but can’t write a stop stream or continue stream.

Also the is a little bug! When you close the lightbox the counter keeps running. When you open a new lightbox a new counter is made. With two counters the stream runs twice a fast.

Thanx in advantage!
Stefan

Leave a comment

Your name

December 5, 2016

Spam protection. Enter result of expression you see in the box below.

2 + 4 =