Simple Slideshow
Posted by Karthik Viswanathan on Sun 15 March, 2009 at 13:37:46 · Tags: javascript, tutorial
Pictures. Illustrations. Images. They say a picture is worth 1000 words. Who would prefer an essay rather than an eye-pleasing image? This post will reel you back in time to create a simple slideshow. Though this may be an old topic, it can be a powerful tool when used correctly.
View a Demo Download the Files
Let’s begin with an unordered list of images:
<ul class="ppt">
<li><img src="ethernet.jpg" alt="Ethernet Cable"></img></li>
<li><img src="glasses.jpg" alt="Spectacles"></img></li>
<li><img src="pisa.jpg" alt="Leaning Tower of Pisa"></img></li>
</ul>As you can see, each image used in the slideshow will be placed in a single list element.
Now for a short snippet of CSS:
ul.ppt {
position: relative;
}
.ppt li {
list-style-type: none;
position: absolute;
top: 0;
left: 0;
}
.ppt img {
border: 1px solid #e7e7e7;
padding: 5px;
background-color: #ececec;
}ul.ppt and .ppt li ensure that the images are placed on top of one another. Although there will only be one image visible at a time, this placement lets us use a nice fading effect, provided by jQuery.
.ppt img sets a basic border for each image.
We can now move straight into the JavaScript. JQuery is especially simple to use when it comes to slideshows:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>To begin, we will hide all of the images except for the first.
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');The variable cur will store the element that is currently displayed in the slideshow. Using this variable, we can create an animate() function that automates the switching the slide show:
function animate() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}This process is very systematic: hide the current slide, find the next slide, display it. Our code is now almost completed.
All that’s left is to call this function in a repeated interval:
$(function() {
setInterval( "animate()", 5000 );
} );In this example, we will use 5 seconds (5000 milliseconds).
That’s all there is to it! Here is the final code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery PowerPoint</title>
<style type="text/css">
ul.ppt {
position: relative;
}
.ppt li {
list-style-type: none;
position: absolute;
top: 0;
left: 0;
}
.ppt img {
border: 1px solid #e7e7e7;
padding: 5px;
background-color: #ececec;
}
</style>
</head>
<body>
<ul class="ppt">
<li><img src="ethernet.jpg" alt="Ethernet Cable"></img></li>
<li><img src="glasses.jpg" alt="Spectacles"></img></li>
<li><img src="pisa.jpg" alt="Leaning Tower of Pisa"></img></li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');
function animate() {
cur.fadeOut( 1000 );
if ( cur.attr('class') == 'last' )
cur = $('.ppt li:first');
else
cur = cur.next();
cur.fadeIn( 1000 );
}
$(function() {
setInterval( "animate()", 5000 );
} );
</script>
</body>
</html>Thank you for reading!
Spanidis Menelaos on Tue 17 March, 2009 says:
Great and easy script! THANK YOU!
One question: if i want to have multiple slideshows in the same page what changes are required?
Greg K on Tue 17 March, 2009 says:
Well stated.
Short and pretty descriptive.
I appreciate.
Karthik Viswanathan on Tue 17 March, 2009 says:
@Spanidis: I created a simple example of two slideshows running at the same time here. Note that there are changes in CSS and jQuery. Good luck
.
carlo on Wed 18 March, 2009 says:
small and works well. Thanks
Carlo
Mateusz on Mon 30 March, 2009 says:
very useful, thx alot
NICOLA on Mon 6 April, 2009 says:
How can I upgrade with an ON/OFF slideshow control?
Karthik Viswanathan on Mon 6 April, 2009 says:
@Nicola: Take a look at slideshow with buttons for an advanced implementation of the concept presented here. It includes a pause/play button.
D.L.M.S.A. on Sat 12 September, 2009 says:
this is great! thank you so much. from all the slides shows i saw, yours is the most simple and works very well.
Ralf on Fri 18 September, 2009 says:
I spent hours looking for a SIMPLE slideshow. Your solution is exactly what I needed. Thank you!!!
Jer on Tue 24 November, 2009 says:
Do you have a list of compatible/tested browsers for this? Great stuff, thanks.
david v. on Thu 18 February, 2010 says:
Thank you,
It’s very simple, and actualy works!!!
I have a problem though, I’m shure you’ll find this very basic but I can’t find my way arround it.
It’s the position of the slide show. I’m designing with tables and the slideshow needs to take place in the midle of a text. I just can’t get it in the right position. It stend over the text and I also can’t get it to align on the left.
What should I do?
Cheers.