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.
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 slideshowstop()
― stops the slideshowforward()
― the renamedanimate()
function from the simple slideshow postback()
― used to move back to the previous slidegoFwd()
― moves forward one slide using theforward()
,start()
, andstop()
functionsgoBack()
― moves back one slideshowPause()
― displays the pause button when the slideshow is playingshowPlay()
― 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!