When it comes to sharing various images on your site, slideshows are extremely common. There are a huge number of scripts, plugins, and tools that are available for generating the actual slideshow.
It’s easy to grab one of these utilities, include it on your site, and have a slick looking effect in relatively short time, but maybe you’re interested in how a slideshow is created or you’re interested in rolling your own.
Here’s how you can create your own simple slideshow using jQuery.
Creating the Markup
First, we’re going to0 need a general HTML skeleton in which the images are going to be linked. Go ahead and stub it. Remember to include the jQuery library. Below, I’m including it from Google’s CDN.
[cc lang=”html”]
[/cc]
Next, we need to include a few images. Since we’re going to eventually need to be able to reference them in the JavaScript, we’ll add the class attribute of “slideshow” to each of the images:
[cc lang=”html”]
[/cc]
The final markup should look something like this:
[cc lang=”html”]
[/cc]
Writing the JavaScript
Next, we need to actually write the code that will control the slideshow. We need this to fire as soon as the page as begun loading, so everything needs to take place within the jQuery ready function:
[cc lang=”javascript”]
$(function() {
// TODO
});
[/cc]
After that, we’ll need to hide all of the images that are to be included in the slideshow (this is why we added the slideshow classname to each image in the markup) except for the very first image:
[cc lang=”javascript”]
$(‘.slideshow’).not(‘:first’).hide();
$(‘.slideshow’).first().addClass(‘activeImg’);
[/cc]
We also added a class “activeImg” to the first image. This is what will allow us to track the image that’s being displayed while the slideshow is playing.
Next, we need to setup a function that fires every few seconds, hides the current picture, and that displays the next one in the set.
We’ll setup a setInterval() function that fires every two seconds:
[cc lang=”javascript”]
setInterval(function() {
// TODO
}, 2000);
[/cc]
Finally, we need to write the code that looks for the currently active image, hides it, removes the “activeImg” class, displays the next image, and then appends the “activeImg” class to it. We’re using the fade function in order to give it a nice effect.
[cc lang=”javascript”]
if($(‘.activeImg’).next().length > 0) {
$(‘.activeImg’).fadeOut(‘slow’, function() {
$(this).removeClass(‘activeImg’).next().addClass(‘activeImg’).fadeIn();
});
} else {
$(‘.activeImg’).fadeOut(‘slow’, function() {
$(this).removeClass(‘activeImg’).siblings(‘:first’).addClass(‘activeImg’).fadeIn();
});
}
[/cc]
Note that we have a conditional in place to make sure that we’re not at the last image. If so, we have to start back at the beginning. The final version of the JavaScript source looks like this:
[cc lang=”javascript”]
$(function() {
$(‘.slideshow’).not(‘:first’).hide();
$(‘.slideshow’).first().addClass(‘activeImg’);
setInterval(function() {
if($(‘.activeImg’).next().length > 0) {
$(‘.activeImg’).fadeOut(‘slow’, function() {
$(this).removeClass(‘activeImg’).next().addClass(‘activeImg’).fadeIn();
});
} else {
$(‘.activeImg’).fadeOut(‘slow’, function() {
$(this).removeClass(‘activeImg’).siblings(‘:first’).addClass(‘activeImg’).fadeIn();
});
}
}, 2000);
});
[/cc]
Feel free to download the demo project and all source files (including the images).
That’s all there is to it!
Brian Notess says
This is awesome!
Definitely helping me move into the “understanding JS” category rather than just staying in the “using pre-made plugins” category.
Tom says
Sweet – that’s the goal! 🙂