JQuery for Dummies - Image Swap Gallery in Three Easy Steps

So, in this tutorial we will be making a nice easy to use image swapping gallery that can be used for personal websites, blogs etc. The final outcome will look something like this: Demo

I am assuming that the readers have at least some basic knowledge of html and CSS but even if you don't it shouldn't be too hard to figure stuff out!

As you can see when you hover over little thumbnails on the bottom the big box with the picture swaps the current image with the one that you hovered over.

Really cool looking and really easy to make. Here is what we are going to do.
First: lets create our basic html mark up.

Step 1:
Open visual studio or dreamweaver or simply notepad and enter the following html code:

< html >< head >

< meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / >< script src="Javascript/jquery-1.3.1.js" type="text/javascript" >< / script >
< link href="CSS/MyCSS.css" rel="stylesheet" type="text/css" / >
< title>Jquery Image Replacement Gallery < / title >

< / head >< body >< h1>Replacement Gallery< / h1 >
< p >< img id="largeImg" src="Images/forest.jpg" alt="large image" / >< / p >

< a href="Images/forest.jpg" title="James getting dunked" target="_blank" >< img src="Images/forestthumb.jpg" alt="small image" / >< / a >
< a href="Images/wavesOnRocks.JPG" title="Image 2" target="_blank">< img src="Images/wavesOnRocksthumbs.jpg" alt="small image" / >< / a >
< a href="Images/Rainbow.JPG" title="Image 3" target="_blank">< img src="Images/Rainbowthumb.jpg" alt="small image" / >< / a >
< a href="Images/Sunrise.jpg" title="Image 4" target="_blank">< img src="Images/Sunrisethumb.jpg" alt="small image">
< a href="Images/whiteSwan.jpg" title="Image 5" target="_blank" >< img src="Images/whiteSwanthumb.jpg" alt="small image" / >< / a >

< / p >< / body >< / html >

OK lets go through this code! First just a normal html starting tags which will be automatically generated if you use dreamweaver or Visual Studio
Then we have two includes(in bold) one for jquery file and one for CSS. My files are in javscript and css folders respectively.

Then we have a simple h1 heading tag for heading of our page "Replacement Gallery
then we have our first paragraph which represents our big picture container where the images will be swapped.
Inside the < p > tag we have the desired image. I have my images stored in the folder called Images also in the same folder.

After our first paragraph the next one follows, with the class of thumbs. This is a paragraph block where we have
our thumbnail images over which we will be hovering. They all are inside the a tags with the attribute of target set to _blank which means that if you were to click on them it would load a new page with that image on there.

OK After you added your raw html with no jquery or css. it should look something like this:STEP 1 (with your images of course).

Step 2:
Lets add some CSS styling to make it look better. Create a new css file and save it as MyCSS.css to match our include in the html header.

Now enter the following CSS into it:
body {
font-family:Arial,Helvetica,sans-serif;
font-size:75%;
line-height:120%;
margin:20px auto;
padding:0;
width:580px;
}
h1 {
margin:0 0 0.2em;
color:Blue;
}

#largeImg {
border:1px solid #CCCCCC;
height:400px;
padding:5px;
width:550px;
}
.thumbs img {
border:1px solid #CCCCCC;
height:72px;
padding:4px;
width:98px;
}

.thumbs img:hover {
border-color:#FF9900;
}

As you can see nothing hard just setting the width color margin and borders for various tags.
One thing to mention. I set the body width to 580 px which allowed me to calculate desirable width and height for 5 thumbnail images. If you were to set it to 1000 and make your large image bigger you could fit a lot more thumbnails underneath in one line or make the 5 existing ones scroll for example using jquery.
OK, so after we have entered our css, your html page should now look something like this:Step 2:

Step 3:
Finally we add our jQuery to see the magic swapping take place.
Get back to your html page and enter the following jquery code in your header section after your title.

< script type="text/javascript" >$(document).ready(function() {
$(".thumbs a").hover(function() {

var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");

$("#largeImg").attr({ src: largePath, alt: largeAlt });

return false;
});

});

< / script >OK so it is not that much at all and it is very easy so lets go through together.
First we declare our script of type text/javascript. Anything between the script tags is our script.
Next we have our first jQuery line:
$(document).ready(function() { which means when document has loaded execute everything that follows
$(".thumbs a").hover(function() { - get the class of thumbs within it find the link tags (a) and when the user hovers over each one of those links do the following:
var largePath = $(this).attr("href"); -- create a variable largePath and set it to the value of the attribute href.
this - is a keyword which takes the exact link the user hover over.
If the attribute href value was equal to Images/Sunrise.jpg" then when user hovers over the sunrise image that value will be stored in the largePath variable
var largeAlt = $(this).attr("title"); - Create variable largeAlt and set it to the value of title of the current link

then we have the line
$("#largeImg").attr({ src: largePath, alt: largeAlt });
which says get the img with the id of largeImg (we could have also written ('img #largeimg'))
and make its src attribute equal to the value of largePath variable and its alt attribute to the value of largeAlt variable.

return false;- if user doesn't do anything don't do anything

That's it. Once you write the jquery into your html and compile your code, you will have a working version of the swapping gallery. Demo

If you have any questions, or comments, then feel free to contact me or facebook or twitt me or whatever makes you happy! Enjoy
Enjoy