How to use jQuery to make image slides tutorial

This tutorial will go over how to make an image slide. When ever I start on an idea for a webpage I like to make notes. Recently I started using Microsoft OneNote for most of my planning. It’s really helped with the planning and presentation of my ideas with clients.

For this tutorial I want to have an image presented on a page. When I hover my mouse over the image I want the image to slide down. When it slides down I want it to reveal a hidden text or graphic below.

Because I’m not a big fan of Flash except when it comes to video I thought jQuery would be a great way of delivering the result I want. Now that we know what we want the items to do lets work on the coding of the jQuery Slide tutorial.

Let’s start with the xhtml:

xhtml

The main part of the xhtml is the div container with an “id” of “slideWrapper”. There is two images. 1 and two. These are the same images I used in the last jQuery tutorial.

As you can see the images aren’t even close to what we are wanting in the drawing we created at the beginning of the post. We’re going to use CSS to place the pictures and then use jQuery to do the sliding function. Because of this it would make sense to look at the CSS to get things looking the way we want them to look and then program the jQuery code.

Before looking at the CSS code you should find out the sizes of the pictures you are going to use. They should both be the same size to make things look right. In my case I opened up Photoshop and viewed the image size there. For the rest of the example I will be using these measurements.

If you have Windows 7 it’s even easier. Just browse to the location of the file. The size is just part of the interface like so:

CSS

Let’s go over a few thing regarding the CSS. I typically find most people have a REALLY hard time understanding floats and positioning.

• Line 1 – Let’s create a wrapper and name it something nice. “slideWrapper”.
• Line 2 – Put the width of pictures here: 200px;
• Line 3 – Put the height of pictures here: 300px;
• Line 4 – We want to position this container relative. We do this because we don’t care where on the page this item is. Anything inside of this container we want them to be positioned relative to this box/container.
• Line 5 – Overflow: hidden means anything that may spill over the size of the container will become hidden from view. This will help ensure that all browsers will display the same output.
• We are going to need the two pictures stacked on top of each other. The easiest way of doing it is by:
• Line 8 – creating an entry for #slideWrapper img. (You wouldn’t want to do this to ALL images on the page)
• Line 9 – We are going to position the images inside #slideWrapper absolutely.
• Line 10 – The top of the picture will be at the top of the #slideWrapper
• Line 11 – The picture will be aligned to the inside left side of the #slideWrapper

This will make the output look similar to this:

Please notice that 2.jpg is positioned in the same spot as 1.jpg. This makes it look like there is only one picture on the screen.

Now we need to implement hover and slide jQuery functions to get the effect we were looking for.

jQuery

Let’s build this thing out a little bit at a time:

Basically this code says when ever you hover over #slideWrapper then run a function, then when we hover off of #slideWrapper run a different function.

Now that we have the skeleton of the code laid out let’s make it a bit more readable.

Following so far? Let’s add the animate parts of the code. Basically we are saying take the child with a class of “fontImage”, stop any animated previously applied to it and then animate with what ever we tell it. The same happens when we take the mouse off the #slideWrapper box.

Since we know the dimensions of the pictures we know we need to slide the top picture down 300px when we hover the mouse. When we take the mouse off we know we need to slide the picture back to it’s original spot. Here’s the code for that:

Here’s a screenshot while the sliding is occurring.

Now since I don’t just like to give the least amount of info, what happens if you want the downward speed of the slide to be different from the speed of the slide going up? Well all you have to do is:

The downward slide is 800miliseconds. and the slide going up is 400ms.

*UPDATE* – I got a private email asking how to change the code so that the top picture slides to the right instead of down. Here’s how I would do it in my next post called: jQuery image slides to the right.