Product Image Switcher Tutorial with jQuery and CSS3

Friday June 3, 2011 Tutorials

I recently needed to build a simple product switcher for an e-commerce site.  Rather than build the interaction right into the site, I decided to come up with a stand alone example of what I needed.

Screenshot of the demo

Demo: http://dabrook.org/examples/labs/product-image-switcher/

The Markup

I won't get into the markup for the entire example, but rather focus on the image switcher part of it.  Since the entire product is wrapped in a article tag, it made sense to use an aside tag for the image switcher.  Here is the code:


<aside class="preview">
	<img alt="Alt title of image" height="220" id="main" src="images/shoe-inside.png" width="300" />
	<nav>
		<a href="images/shoe-inside.png"><img alt="Side of the shoe" height="73" src="images/shoe-inside.png" width="100" /></a>
		<a href="images/shoe-front.png"><img alt="Front of the shoe" height="73" src="images/shoe-front.png" width="91" /></a>		
		<a href="images/shoe-back.png"><img alt="Back of the shoe" height="73" src="images/shoe-back.png" width="91" /></a>		
	</nav>
</aside>

You'll notice that I'm using the same image for the thumbnail and the main image.  Using separate thumbnail images could be easier and faster, but I found using the same image worked fine.

Fallback for no JS

If JavaScript is disabled our navigation will obviously not work.  We could display three full sized images stacked vertically down the left hand side.  Or we could just remove the switcher nav completely.  I went with the second option.  

By setting the entire switcher <nav> to display: none we will just remove nav by default and use jQuery's .show(); function to make the nav display on page load.

The CSS

The styling for the switcher section is pretty simple, with a little CSS3 easing and size transform for a little extra interaction.

img#main {
	border: 1px #ccc solid;
	padding: 2px;
	margin: 10px;
}
nav {
	display: none;
	margin: 0 10px;
}
nav a {
	border: 1px #ccc solid;
	padding: 2px 2px 0;
	display: block;
	float: left;
	margin: 2px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;	
	transition: all .3s ease-in-out;		
}
nav a:first-child {
	margin-left: 0;
}
nav a:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);	
	transform: scale(1.1);				
}
nav a.active {
	background: #FEFFC0;
	border-color: #ECD95C;
}

The JavaScript

Finally we can add the interaction layer.  At the basic level, what we are going to do is take the href value for the nav image and make it the src value for the main image.

When I had the image switch with no easing or animation, it seemed a little too abrupt. So, I used the jQuery animate() function to fade the previous image to a lower opacity, switch the image, and then fade it back to full opacity.  It isn't the smoothest transition ever, but it will do :)

Here's the JS code:

$(document).ready(function() {
	$("aside.preview nav").show();
	var previewImg = $("img#main");
	$("a:first").addClass("active");
	$("nav a img").click(function(){
		var link = $(this).parent();	
		var linkHref = link.attr("href");			
		var linkAlt = link.attr("alt");			
		if( $(link).hasClass("active") == false)
		{
			$("a").removeClass("active");
			link.addClass("active");											
			$(previewImg).animate({
				opacity: 0.8,
			}, 300, function() {
				previewImg.attr("src", linkHref);
				previewImg.attr("alt", linkAlt);				
				$(this).animate({
					opacity: 1,
					}, 300
				);							
			});			
		}
		return false;
	});
	$("input").click(function(){
		$("p.more").fadeIn("slow");
	})
});

Download

Feel free to use on your own sites if you ever need a product image switcher.  

View the demo or download a .zip