Slideshow With Buttons

By Karthik Viswanathan

Previously, I presented a simple slideshow to enhance the user’s experience. To add some extra features and “buff” up this technique, follow along as I create a slideshow with buttons.

View a Demo Download the Files

Take a Step Back

All of the features used in this post will strongly rely on the ones previously presented. Please take a minute to look back at the previous slideshow post so that you are not completely lost. It is assumed that you know the HTML setup from the previous post.

Remember to setup a slideshow using an unordered list:

<ul class="ppt">
	<li><img src="somePhoto.jpg" alt="Your photo description"></img></li>
	<li><img src="someOtherPhoto.jpg" alt="Your other photo description"></img></li>
        (etc.)
</ul>

Overview

4 common slideshow buttons will be implemented in this post:

• Play
• Pause
• Forward
• Back

Each will have its own effect added through JavaScript. I will continue to use the jQuery library, as it makes this addition mostly trivial.

This slideshow will use 8 simple JavaScript functions to fully use the above buttons:

• start() ― starts the slideshow
• stop() ― stops the slideshow
• forward() ― the renamed animate() function from the simple slideshow post
• back() ― used to move back to the previous slide
• goFwd() ― moves forward one slide using the forward(), start(), and stop() functions
• goBack() ― moves back one slide
• showPause() ― displays the pause button when the slideshow is playing
• showPlay() ― displays the play button when the slideshow is paused

Creating the Buttons

The buttons just require some simple HTML markup to be used. Each will have a unique id for future access:

<button type="button" id="back">Back</button>
<button type="button" id="stop">Pause</button>
<button type="button" id="play">Play</button>
<button type="button" id="fwd">Forward</button>

Initializing the Slideshow

Our first few lines of JavaScript will consist of some basic initialization:

$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
$('.ppt li:first').addClass('first');
$('#play').hide();

var cur = $('.ppt li:first');
var interval;

cur stores the current slide and interval stores the interval value so we can stop/start the slideshow as necessary.

Start and Stop

start() sets up a new interval and stores the returned value in interval:

function start() {
	interval = setInterval( "forward()", 3000 );
}

stop() clears this interval:

function stop() {
	clearInterval( interval );
}

Forward and Back

forward() was presented in the previous post as animate():

function forward() {
	cur.fadeOut( 1000 );
	if ( cur.attr('class') == 'last' )
		cur = $('.ppt li:first');
	else
		cur = cur.next();
	cur.fadeIn( 1000 );
}

This function is used in goFwd(), which stops the slideshow, goes forward one slide, and then restarts it:

function goFwd() {
	stop();
	forward();
	start();
}

back() repeats the above process, but moves cur in the opposite direction.

function back() {
	cur.fadeOut( 1000 );
	if ( cur.attr('class') == 'first' )
		cur = $('.ppt li:last');
	else
		cur = cur.prev();
	cur.fadeIn( 1000 );
}

goBack() is also similar to the goFwd():

function goBack() {
	stop();
	back();
	start();
}

Pause and Play

showPause() accesses the pause button and displays it. It also hides the play button:

function showPause() {
	$('#play').hide();
	$('#stop').show();
}

showPlay() does the exact opposite:

function showPlay() {
	$('#stop').hide();
	$('#play').show();
}

Handling the Click Event

Using these 8 functions, it becomes easy to handle the click events of each button. When the forward button is clicked, goFwd() and showPause() should be called, as the slideshow becomes active:

$('#fwd').click( function() {
	goFwd();
	showPause();
} );

A similar technique can be applied to each other button:

$('#back').click( function() {
	goBack();
	showPause();
} );

$('#stop').click( function() {
	stop();
	showPlay();
} );

$('#play').click( function() {
	start();
	showPause();
} );

Bringing it all Together

To start up the slideshow when the page loads, just call the start() method:

$(function() {
	start();
} );

And that’s it ― you have created a slideshow with buttons!

Tags: javascript, tutorial

This entry was posted on Monday, March 23rd, 2009 at 06:00:31. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

• RSS
• Delicious
• Facebook
• DFloat
• DMoo
• E-mail