To contact Ben MacGowan, please fill in the below form. Note that required fields are marked with a blue left border.

Close

Please fill in all required fields before submitting

20 Jul 2009

jQuery

Image Replacement Gallery

For both personal and work-related projects I have, time and time again, needed a simple image replacement script. Of course when starting out we first look for examples and tutorials from books and other websites. This is when I stumbled across the ‘Image replacement gallery’ snippet from Web Designer Wall.

After implementing their code, I still felt it was lacking slightly. Therefore I decided to develop the code further to give a cleaner finish and put jQuery’s animation to good use.

I felt the code should, once a thumbnail is clicked:

- Fade out the existing enlarged image

- Change the src attribute of the enlarged image

- Amend the alt and title values of the enlarged image (based on the alt of the thumbnail)

- Remove class="current" from all thumbnails and add to the click thumbnail

- Fade in the new enlarged image

For added effect, in the demo I have including a loading graphic which is displayed when the enlarged image is faded out. This is achieved by adding a background image to the enlarged image’s div

This may seem like just another Image Replacement Gallery script, but it can act as a great building block for more complicated galleries and once that I use often on my own projects.

View the finished code below or try out the demo.

The Code:

$(function() {
	// When a thumbnail is clicked
	$(".gallery .thumbnails a").click(function() {
		// Get enlarged image attributes
		var largeImg = $(".gallery .feature img");
		var largeImgPath = $(this).attr("href");
		var largeImgTitle = $(this).children("img").attr("alt");
		var largeThumbnail = $(this);
		// Fade out enlarged image
		$(largeImg).fadeOut('slow', function() {
			// Change the attributes of the enlarged large image
			$(largeImg).attr({ src: largeImgPath, alt: largeImgTitle, title: largeImgTitle }).load(function() {
				// Once image is loaded:
				// Remove class="current" from all thumbnails and add to clicked thumbnail
				$(".gallery .thumbnails").children().removeClass("current");
				$(largeThumbnail).addClass("current");
				// Fade in enlarged image
				$(largeImg).fadeIn('slow');
			});
		});
		return false;
	});
});

4 Comments

 

I was looking for something like this to use on this site : http://paolobenvenuti.com

Thanks!

Mark Boas / http://happyworm.com / 23 Jul 2009

 

WOW,
I am a newcomer to js and jquery and I too had stumbled across the Web Designer Wall example while looking for a portfolio gallery for my site.
I have modified the script to include a hover on the thumbnails and was starting to look at some way of fading in and out the large images.-
$(document).ready(function(){

$(“h5″).append(‘‘)

$(function() {
$(‘#navrollover img’).animate({“opacity”: .7 });

$(‘#navrollover img’).hover(function() {
$(this).stop().animate({ “opacity”: 1 });
}, function() {
$(this).stop().animate({ “opacity”: .7 });
});
});

$(“.thumbs a”).click(function(){

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

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

$(“h5 em”).html(” ” + largeAlt + “”); return false;
});

});

I was also using the variable alt data to provide a description of each large image.
I currently have a working example at – http://rosa.actewagl.net.au/graphic_design_c1_p1C.html

Is it possible to add the thumb hover event and variable alt data function to your new gallery?? Because it is much better!

adrian / http://rosa.actewagl.net.au / 23 Jul 2009

 

Hi Adrian,

Thanks for the comment! I have e-mailed you in regards to updating the code with the requested additional features.

Ben / http://www.benmacgowan.co.uk / 25 Jul 2009

 

Hi Ben
Love the tutorial! Quick question, how hard would it be to expand this example to automate the switching of the images, say every 5 seconds? I’m struggling a little bit with making this work in my working example.

greg / / 28 Jun 2010

Leave Comment

Required fields are marked with a blue left border.

Gravatar