Currently Browsing: Home » Slideshow With Buttons

Slideshow With Buttons

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: ,

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.

7 Responses to “Slideshow With Buttons”

  1. iulian says:

    Thanks for your code!
    I have two questions:
    1.It is possible to replace all buttons with images?
    EX: go back button

    go forward button

    2. li tag can be replace by div tag? i cannot place li tag into a td ;(is ‘moving around’)

    Thanks for your answer!

    I’m a ‘very beginner’ in websites and english!

  2. Terry says:

    I am just getting started in this and am trying to follow your examples, How would I go about modifying the code so that I only have the forward and backward buttons without any automatic advancement in the image presentation and with just those two buttons?
    Any information would be appreciated

  3. umesh says:

    Thank you,

    i have try your slide show, but after 1 loop it will be stop…. what should i do for continue slide show in loop

  4. Sam says:

    Hi,

    I tried your tutor. But i have the same question. How do i repeat the slide show after the first round ?

  5. Mauricio says:

    Hi,
    I noticed a little bug in IE (I’m using IE8).
    When the fadeIn, the image width increases 1px and after it come back to normal size.
    Has someone figured out it? If yes, has fixed?

  1. Slideshow Styling

Leave a Reply

Want to be notified when someone replies? Subscribe to this post's comment RSS feed.
Any field marked with a * is required.