Creating a jQuery Slideshow From Scratch – Part 1

September 5, 2012
Developers
LinkedInTwitterFacebookEmail
This post is part of a post series called jQuery Slideshow
  1. jQuery Slideshow - Options for Setup
  2. Creating a jQuery Slideshow From Scratch - Part 1
  3. Creating a jQuery Slideshow: Adding Arrow Navigation
  4. Creating a jQuery Slideshow - Styling with CSS
  5. Creating a jQuery Slideshow - Adding Descriptions
  6. Creating a jQuery Slideshow - CSS for Descriptions
  7. Creating a jQuery Slideshow - Setting up Thumbnails
  8. Creating a jQuery Slideshow - Clicking on Thumbnails
  9. Creating a jQuery Slideshow - Adding Thumbnail Navigation
  10. Creating a jQuery Slideshow - Adding Links to the Images

There are tons of pre-made jQuery slideshows out there, but if you’re looking to create your own (whether for the knowledge or for a client), this post series will walk you through the entire process.

We’ll start with the layout and coding a very basic jQuery slideshow. In each additional post, we’ll add in features: navigation, thumbnails, thumbnail navigation, preloading, etc.

We won’t be coding this using Object Oriented Programming, but it will be organized and thought-out in the same way, so it’s a good place to start if you’re trying to make the jump.

What We’re Creating

The slideshow we’re creating in this post is incredibly basic: just one large image, no navigation or thumbnails. It will automatically cycle through the images with no input from the user, and we’ll use jQuery to time it and change the image source.

The HTML & CSS

To create a simple slideshow like this, the only thing we really need is an image on the page with an ID.

<img id="slideshow" alt="" src="source.jpg" />

Then, just to keep our slideshow organized, we’ll add in some qualifications for our image in the CSS file.

#slideshow { max-height:300px; max-width:300px; }

The max-height and max-width statements will let the image keep its dimensions, but won’t let it get too big.

But, if the images might change size, the rest of the items on the page might also move around as the image source changes. So instead of just adding the image, we’re also going to put a Div around that image and give the Div a set height and width.

</pre>
<div id="holder"><img id="slideshow" alt="" src="source.jpg" /></div>
<pre>

 

#holder { height:300px; width:300px; }   //add to CSS file

The jQuery

The jQuery is where the magic really happens.

EDIT: Before you do anything, you’ll need to include the jQuery file – thanks Ken for pointing this out!
At the time of writing this, the most current version is 1.10.2. If you want to find the current version now, check out Google Libraries API.

Include this in the head of your page:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.10.2%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

First, we’ll set up an array in Javascript/jQuery to hold the sources for the images.

images = ['http://kimjoyfox.com/wp-content/uploads/drwho8.jpg', 'http://kimjoyfox.com/wp-content/uploads/drwho7.jpg', 'http://kimjoyfox.com/wp-content/uploads/drwho6.jpg', 'http://kimjoyfox.com/wp-content/uploads/drwho5.jpg', 'http://kimjoyfox.com/wp-content/uploads/drwho4.jpg', 'http://kimjoyfox.com/wp-content/uploads/drwho3.jpg'];

Next we’ll write the code that times our slideshow (4000 = 4 seconds):

//this will start the animation automatically
setInterval(forwardImage, 4000);

Now you’ll notice in the coding above that we use the setInterval jQuery function, and then we call another function (that I named forwardImage) within that function. We could just write the actual coding here, but eventually we’ll want to use the coding again (when we add navigation), so we’re going to put it inside of a function.

Notice in line 4 and 6 below, we check to see if we’re at the last image in our images array. “.length” in jQuery returns the total number of items in an array. But watch out! Because arrays start at 0, while counting starts at 1. So to compare the number of items in the array to the current key we’ll need to subtract one.

For example,  the keys of the array number 0-5, but when we count the items in the array, there are 6. So in the coding, we check to see if the current image key (i) is less then 6-1=5. If it less then 5, then we add to i and move forward. Otherwise, we start back over at 0.

//This function will move the slideshow forward one
function forwardImage() {
currentImageKey();
if (i < images.length - 1) {
changeImage(i + 1);
} else {
changeImage(0);
}
}

Within the forwardImage function (above), we call another function: currentImageKey (line 3). We’ll be using this frequently in our coding, so I just put it inside a function. This will tell us what #(key) in the array that we’re on (0-5 for our array).

//This function will find the key for the current Image
function currentImageKey() {
i = jQuery.inArray($('#slideshow').attr('src'), images);
return i;
}

Finally, we add the final function: changeImage (called inside of the forwardImage function, line 5 and 7) that will do the actual heavy lifting of changing the image.

We’re using the animate() jQuery function to change the opacity of the image to 0, and then changing the image source. once the image source is loaded (.load), then we change the slideshow image opacity back to 1. The speed of the animation is controlled on line 5 and 10. 200 equals .2 seconds animation.

//This function will change to image to whatever the variable i passes to it
function changeImage(i) {
$('#slideshow').stop().animate({
opacity: 0,
}, 200, function() {
$('#slideshow').attr('src', images[i]);
$('#holder img').load(function() {
$('#slideshow').stop().animate({
opacity: 1,
}, 200)
})
})
}

And that’s it! Our basic slideshow is done!

See it in action:

Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Comments

1 Trackback