Manual photo filmstrips in jQuery

One thing I was looking for recently, was a way in jQuery to click a thumbnail image, and for a larger image on the page to be replaced with the larger version the thumbnail (which the thumbnail is a link to). This was for some improvements to our e-commerce framework. After searching without success (although I'm sure I've seen it somewhere before), I realised it would be really easy to create from scratch - so I did, and here it is for you all to enjoy! Its really simple, but does the job.

$(document).ready(function(){
	imageSwapper(".thumbnails a");
});

function imageSwapper(link) {
	$(link).click(function(){
		$('#largeimage').attr('src', this.href);
		return false;
	});
};

Just put the thumbnails in a div or paragraph of class thumbnails, and give the large image an ID of large image, and you are good to go!

Continue reading this entry...