The "Tech. Arch."

Architecting Forward ::>

Showcasing Your Content In A Slick jQuery Slideshow Control

A few weeks ago, as I was redesigning the home page of one of my site, mySkillsMap, based on feedback from Jason Roberts and Justin Vincent, on their segment of the TechZing podcast, I decided to include an auto-advancing gallery to showcase screenshots from the site.

I was already using a slideshow gallery on mySkillsMap to showcase user portfolios. The slideshow was based on the article from SixRevisions titled “Create a Slick and Accessible Slideshow Using jQuery”. The article was well-stuctured and made it easy to implement a nice-looking slideshow.
I had noticed in the comments that Stéphane Lyver, was mentioning he had created a French adaptation of the tutorial, and had made a couple enhancements including:

I clicked on over to Stéphane’s site, and started to mix his code enhancements with my own adaptation of SixRevision‘s slideshow code, all this while translating the code back to English! So this post is a translation and adaptation of Stéphane’s enhancements (with his permission).

Here is what the enhanced slideshow looks like:

Download the Enhanced Slideshow code

Enhancements Tutorial

So let’s see how to build the enhanced version. I am assuming that at this point you have already downloaded the code from SixRevisions, have already gone through the tutorial, and have implemented the slideshow on your site.

Declaring new variables

So now go to the start of the Javascript code and declare the following variables:

$(document).ready(function(){
    // ...

	var slideshow_start_mode  = false; 
    var autostart_slideshow = true;  
    var rewind_slideshow = true;  
    var display_slideshow_control_panel = true;  
	 
    var slide_transition_time = 1000;  
    var slide_viewing_time = 6000;  
       
    var slideshow_control_icons = new Array();  
	// Note: you can download the .png locally and edit the urls below to reflect your path
    slideshow_control_icons['play']  	= 'http://upload.wikimedia.org/wikipedia/commons/0/09/Control_play.png';  
    slideshow_control_icons['pause'] 	= 'http://upload.wikimedia.org/wikipedia/commons/0/09/Control_pause.png';     
	 
    var interval;  
	 
    // ...
}

Let’s see what the new variables are used for:

Variable Usage
slideshow_start_mode If true, the slideshow will automatically move to the next slide after a certain time (controlled by slide_transition_time and slide_viewing_time – see below) or
autostart_slideshow If true, the slideshow will automatically start once the page is loaded
rewind_slideshow If true, the slideshow will automatically rewind by going back to slide #1
display_slideshow_control_panel
slide_transition_time The number of milliseconds the jQuery slide transition effect will last
slide_viewing_time The number of milliseconds a given slide will be displayed before the slideshow automatically moves on to the next slide in auto-advance mode
slideshow_control_icons This array contains a list of icons names to use for the control panel (specifically for the pause and play buttons)
interval The Javascript interval timer used during auto-advance mode

Extracting and declaring these variables upfront increase readibility of the code and makes it easy to quickly change the settings without having to go through the whole source.

Implementing Auto-Advance

This feature will be based on 3 functions that we will add after the manageControls function:

Function Purpose
start_slideshow Positions the slideshow on the first slide and starts the auto-advance slide progression
show_next_slide Moves to the next slide by triggering the right arrow control
pause_slideshow Stops the auto-advance until it is resumed by start_slideshow

Let’s look at the implementation:

function start_slideshow() {  
   slideshow_start_mode = true;  
   interval = setInterval(show_next_slide, slide_viewing_time );  
}  
 
function show_next_slide(){  
   $('#rightControl').click();  
}  
 
function pause_slideshow() {  
   slideshow_start_mode = false;  
       clearInterval(interval);  
}
  1. The start_slideshow and pause_slideshow both toggle the slideshow_start_mode variable.
  2. To execute the show_next_slide function on a periodic basis (every so many milliseconds) an interval timer is created. The first parameter of setInterval is the function to execute, the second parameter is the number of milliseconds between executions.
  3. To stop the execution of the show_next_slide function we just clear the interval using the clearInterval function, passing our interval object.
  4. Finally, the show_next_slide function just advances the slide as if we had manually clicked on the right arrow button of the slideshow, by invoking the click() function of the #rightControl button.

Now that these 3 base functions are available, we can trigger the start_slideshow function by adding the following snippet to the $(document).ready function:

$(document).ready(function(){
    // ...
	
	// If auto start is on kick off the slideshow
	if(autostart_slideshow == true){  
		start_slideshow();  
	}
}

Creating the control panel

The base slideshow has forward and backward buttons, so now that we’re adding auto-advance it would be nice to have a little control panel at the bottom of the slide allowing us to pause or resume the slideshow.

First let’s add two new functions right after the 3 functions we already added:

Function Purpose
setup_control_panel Add and position an image with an id of slideshow_control_panel to act as a control button and setup a handler for the control button’s click event.
handle_control_panel_click Handle the click event on the control button to either pause or resume the slideshow. 

	
	function setup_control_panel() 
	{
		$('#slidesContainer').prepend('≤img id="slideshow_control_panel" src="" alt="Navigation diaporama" />');  
		var control_panel = $('#slideshow_control_panel');

		if(autostart_slideshow == true)
			control_panel.attr('src',slideshow_control_icons['pause']);  
		else
			control_panel.attr('src',slideshow_control_icons['play']);    
			
		control_panel.bind('click', handle_control_panel_click);
	}

	function handle_control_panel_click()
	{
		if(slideshow_start_mode == true)
		{  
			$(this).attr('src',slideshow_control_icons['play']);  
			pause_slideshow();  
		}
		else
		{  
			$(this).attr('src',slideshow_control_icons['pause']);  
			start_slideshow();  
		}  
	}

Let’s break down the behavior of these 2 functions:

  1. We dynamically add an image with the id slideshow_control_panel.
  2. We set the source of the image to be either a pause or a play button depending on the value of autostart_slideshow.
  3. We bind the click event handler accordingly to either invoke pause_slideshow or start_slideshow and toggle the control panel button image.

Ok, now we will leverage the display_slideshow_control_panel variable we added to conditionally setup the control panel after the manageControls function has been called (within $(document).ready):

$(document).ready(function(){
    // ...

	// Hide left arrow control on first load
	manageControls(currentPosition);

	// Conditionally setup the control panel if needed
    if(display_slideshow_control_panel == true)
		setup_control_panel();

    // ...
}

And let’s define the CSS for our control panel as follows: 

			
       #slideshow_control_panel{  
         display:block;  
         width:20px;  
         height:20px;  
         position:absolute;  
         right:25px;  
         bottom:10px;  
         cursor:pointer;  
     }

For the pause and resume icons, I used the following 2 icons from the Silk icon theme on Wikimedia Commons:

Icon Purpose Name
pause Control_pause.png
resume/play Control_play.png

Now we have nice-looking control panel!

Adding the endless loop

So at this stage, we added the ability to auto-start the slideshow, auto-advance to the next slide, and pause or resume the slideshow. We just need to have the slideshow loop back to the beginning after the last slide. Let’s touch up the manageControls function to reset the currentPosition (i.e. current slide) to zero once we’re on the last slide (i.e. done displaying it) and rewind_slideshow is true:

	function manageControls(position)
	{
		/ Hide left arrow if position is first slide
		if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
		
		// Hide right arrow if position is last slide
		// and if auto rewind is not on
		if(position==numberOfSlides-1 && rewind_slideshow == false)
		{
			$('#rightControl').hide();
		} else {
			$('#rightControl').show();
		}
		
		// Go back to the first slide if we're on the last slide
		// and if auto rewind is on
		if(position == numberOfSlides && rewind_slideshow == true){
			currentPosition = 0;
			 $('#leftControl').hide();
		}
	}

Now we also need to adjust the click event handlers for the backward and forward buttons so that they can take into account the rewind_slideshow flag to pause the slideshow if necessary:

					
	// Create event listeners for .controls clicks
	$('.control').bind('click', function()
	{
		// Determine new position
		currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

		// If auto rewind is off pause the slideshow 
		// when on the last slide
		if(currentPosition == numberOfSlides 
			&& rewind_slideshow == false )
		{  
             currentPosition--;  
             pause_slideshow();  
        } 
		 
		// Hide / show controls
		manageControls(currentPosition);
		
		// Move slideInner using margin-left
		// during the defined slide transition elapsed time
		$('#slideInner').animate(
			{
			  'marginLeft' : slideWidth*(-currentPosition)
			}
			,slide_transition_time);
	});

Note that we added slide_transition_time to make the slide transition duration configurable.
Now when adding the slideshow to your web page, you can override the default settings by adding the following script:

That’s it! With a few enhancements we now a very functional slideshow.

So What?

Often web designers have relied on Flash to created animated galleries, but as demonstrated by SixRevisions and Snoupix, “pure” web technologies like HTML, CSS and jQuery can also allow you to create a really slick slideshow gallery.
With the additional enhancements you can now add automatic start, endless looping, as well as a control panel to pause / play the slideshow.

You too can now leverage the power of a slideshow to showcase features, benefits, etc. using images on your site.

Download the Enhanced Slideshow code

Check-out the main page of mySkillsMap to see an illustration how the slideshow can quickly communicate key messages to your audience.

References and Resources

Sites:

March 17th, 2010 Posted by | css, javascript, jQuery, Tools | 6 comments