Creating a Basic jQuery Slideshow
Thursday, April 1, 2010 1:39:51 PM
I needed a basic slideshow/image rotator with just the features I wanted and nothing more, and I needed a good excuse to play with jQuery. Here's the result of satisfying both of those needs. Look forward to another article that will expand upon this basic slideshow with pausing, text and navigation controls. Until then, enjoy.
To get started we need to create a basic html file, we’ll call it SlideShow.html Here’s how it should look.
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Slideshow Demo</title>
<meta name="Author" content="Ryan T. Hilton" />
</head>
<body>
</body>
</html>
Add jQuery from Google by placing this in your <head> section
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
We also need to add some styles to the page. Create a file called style.css and add this to the <head> section.
<link rel="stylesheet" type="text/css" href="style.css" />
And now we’ll add some basic styles to style.css
body
{
background-color: rgb(45,45,45);
}
.Container
{
width: 500px;
margin: 20px auto;
border: 4px solid rgb(255,255,255);
background-color: rgb(200,200,200);
color: rgb(45,45,45);
position: relative;
height: 309px;
}
#slideshow
{
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
#slideshow li
{
float: left;
position: absolute;
}
Now, let’s setup the HTML for the slideshow. Add this between the <body> and </body> tags. Just add an extra <li> for each image.
<div class="Container">
<ul id="slideshow">
<li>
<img src="Images/Image1.jpg" width="500" height="309" />
</li>
<li>
<img src="Images/Image2.jpg" width="500" height="309" />
</li>
<li>
<img src="Images/Image3.jpg" width="500" height="309" />
</li>
</ul>
</div>
Let’s create a new .js file and add it to the <head> section now as well. We’ll call it SlideShow.js and place it in the same directory as the html file
<script type="text/javascript" src="SlideShow.js"></script>
Now, we can start with the basics of the JavaScript. The rest of this will be done in SlideShow.js
First lets set up some variables to configure the behavior.
var fadeTime = 1200; // Fade in/out each image over 1.2 seconds
var pauseTime = 4000; // Pause on each image for 4 seconds
Now we need to setup a few internal variables that we’ll use to maintain the state of the slideshow.
var current = 0; // Current index
var cur; // Stores current item
var next; // Stores next item
var timer; // Used for starting/stopping the rotation
var size = 0; // Stores the number of items to rotate
var paused = false; // Are we paused?
How about we get started making things work? We’ll start by creating an initialization function. This will get everything setup and start the rotation.
function StartSlideShow()
{
// Hide all of the items
$('ul#slideshow > *').css("display", "none")
.css("left", "0")
.css("top", "0")
.css("position", "absolute");
// Display the first item
$('ul#slideshow li:first').css("display", "block")
.css("left", "0")
.css("top", "0")
.css("position", "absolute");
// Set size variable to number of items
size = $('ul#slideshow li').size();
// Start the rotation timer
StartTimer();
}
function StartTimer()
{
// Make sure we have a clean slate
clearInterval(interval);
// Call Switch() every x milliseconds
interval = setInterval(‘Switch()', pauseTime);
}
function Switch()
{
cur = ($(‘ul#slideshow li’).eq(current));
// Check to see if we are at the end of the list
if ((current + 1) == size)
{
next = ($('ul#slideshow li').eq(0));
current = 0;
}
else
{
next = ($('ul#slideshow li').eq(current + 1));
current = current + 1;
}
// Fade between the images
cur.fadeOut(fadeTime);
next.fadeIn(fadeTime);
}
Ok, we are all done with SlideShow.js for now. Let’s go back to our SlideShow.html file. In the head section, add the following. This will tell jQuery to run StartSlideShow() when the page is loaded.
<script type=”text/javascript”>
<!--
$(document).ready(function() {
StartSlideShow();
});
-->
</script>
You should now be able to run your slideshow by opening the HTML file in your favorite browser.
View Demo
Download