jQuery Image Gallery
December 7th, 2008Create your own simple image gallery for your site with jQuery. jQuery makes creating simple interactive web pages a breeze. Use this easy to implement jQuery image gallery to show off your quality images using an interactive interface. This script uses the hover method on thumbnail images to show larger versions of the thumbnail.
Requirements
Demo
The basics
Start off with a basic HTML layout and link to the jQuery javascript library. Include an unordered list with a CSS class “thumb” of which links to the images in the gallery and an image placeholder with a src attribute to the first image in the gallery and the CSS class to “thumb”.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>jQuery Image Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
</head>
<body>
<ul class="thumb">
<li><a href="images/pic1.jpg"><img src="images/thumbs/pic1.jpg" alt="gallery thumbnail 1" /></a></li>
<li><a href="images/pic2.jpg"><img src="images/thumbs/pic2.jpg" alt="gallery thumbnail 2" /></a></li>
<li><a href="images/pic3.jpg"><img src="images/thumbs/pic3.jpg" alt="gallery thumbnail 3" /></a></li>
<li><a href="images/pic4.jpg"><img src="images/thumbs/pic4.jpg" alt="gallery thumbnail 4" /></a></li>
</ul>
<img src="images/pic1.jpg" alt="gallery image" class="big" />
</body>
</html>
Now for some simple jQuery.
Start off with the the document ready function so that the script runs when all content has loaded to the page. Then we want to capture the hover event of the of all the links in the thumb unordered list. This accepts two arguments which are both functions. We are only interested in the first of these functions which is the onmousein function.
When the user hovers over the link we want to get the anchor tags href attribute and assign it to the variable imgHref for future reference. Now we will let the user know which thumbnail has been selected by firstly making sure that all thumbnails have the “selected” CSS class removed and then add the CSS class to the current thumbnail. Before animating the image to fade in we first want to stop all other animations. This will limit the number of animations queued up to just one otherwise there will be a continued number of animations if you hover over a number of thumbnails quickly. Using the “fadeTo” method we can then set the time to 700 miliseconds to fade the main image to nothing. Simply then change the src of the large image and then fade the image back in using “fadeTo” again. There we have it! a working image gallery. If you prefer users to click on the thumbnails you can use the “click” event rather than the “hover” event. You can also play about with the timings of the “fadeIn” method to your requirements.
<script type="text/javascript">
$(document).ready(function(){
$(".thumb a").hover(function(){
var imgHref = $(this).attr('href'); //get the src of the thumbnail
$(".thumb a").removeClass("selected"); //remove .selected class from all other links
$(this).addClass("selected"); //add .selected class to current link
$(".big").stop();
$(".big").stop().fadeTo(700, 0, function() { //fade image out
$('.big').attr('src',imgHref); //give new image a src attribute
}).fadeTo("slow", 1); //fade the image in
},function(){ //for onmouseout not used here
});
});
</script>
Adding some style
Now finish off the gallery by adding some basic styling. Paste the following styles into the head of your document or an external style sheet.
<style type="text/css">
* {
margin:0; padding:0;
}
ul {
list-style-type:none;
}
li {
display:inline;
}
ul li img {
border:none;
margin-right:0px;
}
.big {
clear:left;
}
.selected {
font-weight:bold;
}
</style>
February 7th, 2009 at 10:51 pm
Just what I was looking for, thank you!
February 14th, 2009 at 12:02 am
Hello Guru, what entice you to post an article. This article was extremely interesting, especially since I was searching for thoughts on this subject last Thursday.
April 16th, 2009 at 2:41 am
Seems so simple, but just what I was looking for and could not find anywhere! Thank you!!
May 22nd, 2009 at 2:39 pm
Excellent demo and scripting, thanks! I have a question though … do you know how I could set this up to open a new HTML page, rather than just opening the JPG image when you click on any of the thumbnails? Thank you…
May 25th, 2009 at 8:07 pm
please, tell me, how change the big pictures href url (###bigbigpicurl###) to change it when change the thumb?
example:
thank you!
July 1st, 2009 at 5:31 am
Excellent information. Finding a few such solutions has taken hours in the past.
Thank u.