After searching for a simple jquery image gallery for an online store I decided to make my own. There were several solutions that were close to what I wanted, but quite there. The project required an simple large vierw of an image with multiple thumbnails below, when hovered upon switched the large image. The requirements were as follows: cross browser compatible (IE6 plus, Chrome and Firefox – all the major browsers), have a nice fading effect between image changes and be totally degradable if JavaScript was turned off.
First of all, take a peek and the finished JQuery image gallery – I’ve put the gallery in context on a product detail page for an ecommerce store.
JavaScript and JQuery to the Rescue!
JQuery was the JavaScript framework of choice and made it easy to get things up and running. Techniqually the same effect can be achieved without JQuery, but for simplicity I’m using JQuery. The code is quite easy to follow and I’ll just pickup up on the main parts.
Firstly we’ll start off with the HTML – simply two dividers, with an unordered lists for the thumbnail images:
<div id="bigpic" class="b"><img src="images/big/iphone-3-big.jpg" alt="iPod Shuffle 16GB Zoom View" /> <p id="desc">iPod Shuffle 16GB Zoom View</p> </div> <div id="thumbs"> <ul> <li><a rel="images/small/iphone-1-small.jpg" href="images/big/iphone-1-big.jpg"> <img src="images/small/iphone-1-small.jpg" alt="iPod Shuffle Front View In Blue!" /> </a></li> <li> <a rel="images/small/iphone-2-small.jpg" href="images/big/iphone-2-big.jpg"> <img src="images/small/iphone-2-small.jpg" alt="iPod Shuffle Dual View Grey!" /> </a></li> <li> <a rel="images/small/iphone-3-small.jpg" href="images/big/iphone-3-big.jpg"> <img src="images/small/iphone-3-small.jpg" alt="iPod Shuffle 16GB Zoom View" /> </a></li> </ul> </div>
The main image is housed in the divider with the id of ‘bigpic’. I’ve also added a description below the big image – this will change when the image is hovered over to the thumbnail alternate text. Each thumbnail link goes directly to the enlarged version of the image – this way, the gallery will still work when JavaScript is turned off.
The JQuery Magic ….
Right after including the JQuery library (I recommend you make use of Google CDN for this – there are many reasons to let Google host your JQuery files) I have included an int,js file – this contains all the gallery JavaScript. The int file is a small file that catches a hover on each thumbnail and switches the main gallery image (Our ‘bigpic’ divider). All the code is contained within the mahic document.ready listener. The first half of the file catches the hover on a thumbnail:
$('#thumbs ul li a').hover(
function() {
var currentBigImage = $('#bigpic img').attr('src');
var newBigImage = $(this).attr('href');
var currentThumbSrc = $(this).attr('rel');
switchImage(newBigImage, currentBigImage, currentThumbSrc);
},
function() {}
);
Here we are getting the currentBig image href, the new big image (from our thumbs href) and current thumbnail src. The second empty fucntion is included to say ‘don’t do anything when hovering away’. Exclude this empty function and the hover event will continue to fire when you leave the image. Now we have these three variables we pass them to our switchImage function, code below:
function switchImage(imageHref, currentBigImage, currentThumbSrc) {
var theBigImage = $('#bigpic img');
if (imageHref != currentBigImage) {
theBigImage.fadeOut(250, function(){
theBigImage.attr('src', imageHref).fadeIn(250);
var newImageDesc = $("#thumbs ul li a img[src='"+currentThumbSrc+"']").attr('alt');
$('p#desc').empty().html(newImageDesc);
});
}
}
This is quite self explanatory. The first check made is that the current big image is not the same as the target big image – if this was true we would fade in and out the same image, which leads to a rather weird looking effect. If both paths match, the user has hovered over the thumbnail of the current big image (in this case nothing would happen). Hovering over any other image will result in the current big image fading out, setting the big image src to the src from the thumbnail (the new image) and populating our description paragraph.
Using the Gallery in a Production Website
In the example 3 static large and small images have been manually added for simplicity. In a real website, maybe an online store, you would retrieve this information from a database. Another thing to note is image sizes. I always find it useful to let users upload whatever file resolution they want, giving them the exact pixels as a recomendation. To ensure that a particularly large file wouldn’t break the layout I tend to sue image resizing scripts, such as the excellent smart image resizer from shifting pixel – uploaded images can be automatically scaled to dimensions of your choosing.
Also, at some point I’ll learn about making your owns plugins for JQuery and turn this into a self contained plugin 🙂
There’s not a lot more to this to be honest. tested in IE6, IE7, IE8, Chrome and Firefox – all working nicely.
Take a look at the final result or download the source files. Enjoy!
Really like this as it degrades perfectly, unlike a lot of tutorials I’ve found.
I’ll be using this exact code (if that’s ok) on a site I’m working on the minute – I’ll email you a link over.
Thank you
vujudesign
Nice tutorial. Can I use this on my own website? I have a relative who is able to copy and paste code to get it working. Thank you
This is Fancy Thumbnail Hover Effect w/ jQuery .This effect is very essential to any image gallery. It can improve any site.
Great tutorial. Very nice hover gallery! Would it be possible to not link the thumbnails to the big image? I know its probably part of the degrading process, but for those with javascript enabled, it might be a bit pointless to link them to the same image that shows in the big image.
To clarify would I be able to use so that the link does not go through? Should I use a different anchor attribute to pass the path through the function?
sorry I tried to state the anchor tag I will try again (using spaces in between):
@Table Decorations in the UK
Yes that’s fine 🙂
@Chris
Thanks for the comment.
Do mean because I’ve linked directly to the larger image? If so, this is so people without JS can view the larger image. If you wanted to pass through a differnt image, you could change the value of the href in the image thumbnail – if you look they all currently point to a larger view of the current thumbnail? Is this what you mean?
@Rob
Sorry. Now I see what that was for. JS degradation. Very nice. I’ve got one small issue however, when these images are not cached in my browser, and I hover over a new thumbnail it stays on whatever defaulted (or current) bigImage until the new big image is loaded and then the new big image appears (instantly). Is there a way to smooth out the loading of the new images?
@Chris
Well I’ve actually selected a fadeout / fadein of the image so it’s smooth. The big images are 7KB or less too. I guess you could try silently loading the images in the background – could use a simple hidden div or use jquery to preload the remaining bigger images for you.
What browser are you using out of interest?
I have used javascript to disabled right click to deter some people from stealing the images. Is there a way to stop the the big image opening in new window when clicking on the thumbnail?
@Richant
Thanskf rot eh comment. Yes, the thumbnail list you have a each surrounded by a link. You could remove this link. However, I wouldn’t recommend it due to the images being inaccessible of JavaScript is turned off. Also, anyone who knew what to look for could still get the larger version of you image 🙂
this looks like an elegant solution, cleaner than a lot of plugins, will give it a go next time I need something like this, cheers
This is Fancy Thumbnail Hover Effect w/ jQuery .This effect is very essential to any image gallery. It can improve any site.
Thank you, Rob! A really great and helpful tutorial, and so easy to implement.
I have used it here:
http://www.deborah-lanz.ch/fotos.html
Great stuff! Always good to see your code being put to good use 🙂
I have a question, is there a way where this entire code will work with a hotlink of images of urls? I want to hotlink different images from another website I own.
Hi,
There’s no reason that wouldn’t work, you’d just replace the image src’s. The only issue you’re likely to have is displaying the thumbnails, as you wouldn’t want to resize them using HTML only. Ideally, you want to save the image to your website and resize it there – as I can’t think of any image reszing scripts that allow remote image resizing.
Alternatively, you could use CURL or file_get_contents to fetch each image, but this would slow you page downj a lot. However, you could write a cron job that downloads and resizes your image, meaning your page would only ever be displaying local, as opposed to remote images. If you want some examples in on twitter – @roballport.
Thanks
Great job..the perfect one…but i do have a little problem. The thing i need is more than one product in the same page and hence when thumbnail hovered the respective image should be changed. Any help is much appreciated.Thanks in advance.
Hi,
For that you’d need to utilize the $(this) variable and gives each image roller over a class, as opposed to an id. Using the latter, you could easily use multiple image sets, with rollovers per page. If I get time, I’ll write a short blog post how to do this 🙂
Thanks a lot Rob for your response. I will try it as you said but on the other hand i am also waiting for your short blog post 🙂
I’d be interested in a tutorial on having multiples of this functionality on the same page too. I’ll stay tuned.
Thanks for the above tutorial.
Hi Rob
Brillaint Tutorial! Learnt lots and it works brilliantly. I’ve tried using this with JCarousel Lite however and have managed to mess it up.
One intial load the hover script works fine but as soon as I start rotating the carousel, hover performance becomes patchy. I can hover over the image and though the cursor changes, the image doesn’t react. Any ideas?
Thanks for the comment. I have used this in the past with that exact slider (as it’s literally an extra 2KB of JavaScript). I found changing the trigger from hover to click worked well.
For your scrolling issue you could make use of the JCarouselLIte callbacks. They are fairly easy to deal with as they return a JavaScript object (have a look at the console if you enable logging). E.g. passing the letter “a” to the afterEnd function would give you a huge “a” object to work with. E.g. to slowly fadeOut the old image and fadeIn the new image you could use the following code:
beforeStart: function(a) {
$(a).parent().fadeTo(400, 0);
var bg = $(a).find('img').attr('src');
$('.slider').css({backgroundImage: "url("+bg+")"}, 600);
},
afterEnd: function(a) {
$(a).parent().fadeTo(600, 1);
}
Granted some sliders have the above built in, but they aren;t all 2KB in size 🙂
Hi Rob,
Works flawlessly! Is there a way to make the script with a mouse click instead of a mouse hover?
I tried replacing:
$(‘#thumbs ul li a’).hover(
with:
$(‘#thumbs ul li a’).click(
But it opens the image in a new window.
Any idea how to tweak this properly?
Thanks!
How can I remove the link to the main image opening on a different page? When I delete it in dreamweaver it removes the large image altogether. When I remove “href=”images/rings/large/ring01_L.jpg”” from the code it breaks the hover. And when I remove “rel=”images/rings/thumbnails/ring01.jpg”” fom the code it doesn’t change anything.
Thanks in advance…
You’ll need to keep the rel= as that stores information that JavaScript code requires. Additionally, you need to keep the large link from the thumbnail for accessibility – otherwise, someone without JavaScript wouldn’t be able to view the large image. If you did want to remove the link, you could remove the link to large version altogether and store the zoomed version in the rel=” instead. The code is only basic so it would be easy to edit. However, this tutorial is fairly dated now and I’d recommend using HTML5 data attributes as opposed to normal element attributes.