Simple Slideshow

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.

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="https://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="https://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!

Leave a Reply

Simple Slideshow