Tutorials

Multiple Image Viewer w/ Thumbnails

Tags: Beginner

Here is a technique that I use when creating product detail pages commonly seen in most e-commerce sites. I use some simple javascript for the image switch and use CSS to crop the thumbnail images.

Lets get started!

First let’s identify the different elements that make up a typical product image viewer:

1. Brand Logo
2. Large (Main) Product View
3. Thumbnails

HTML

Let’s start by creating a container for our image viewer and placing the logo and main three large product images inside.

<div class="photos">
	<img src="Triumvir.gif" alt="Triumvir3.com" class="logo" />
	<img src="ARTofWAR_BLK(3).jpg" alt="Black" />
	<img src="ARTofWAR_RED.jpg" alt="Red" />
	<img src="ARTofWAR_WHT.jpg" alt="White" />
</div>

Wrap each product image with a <div> and assign an Id of “Photo_ (# -number goes here)”>. Note that this ID will increment for each image used. Also add an inline style of “display: none;” on the images that should be hidden by default.

<div class="photos">
	<img src="Triumvir.gif" alt="Triumvir3.com" class="logo" />
	<div id="photo_1"><img src="ARTofWAR_BLK(3).jpg" alt="Black"/></div>
	<div id="photo_2" style="display:none;"><img src="ARTofWAR_RED.jpg" alt="Red" /></div>
	<div id="photo_3" style="display:none;"><img src="ARTofWAR_WHT.jpg" alt="White" /></div>
</div>

Now we will be adding the thumbnails using a list.

<div class="photos">
	<img src="Triumvir.gif" alt="Triumvir3.com" class="logo" />
	<div id="photo_1"><img src="ARTofWAR_BLK(3).jpg" alt="Black"/></div>
	<div id="photo_2" style="display:none;"><img src="ARTofWAR_RED.jpg" alt="Red" /></div>
	<div id="photo_3" style="display:none;"><img src="ARTofWAR_WHT.jpg" alt="White" /></div>
	
	<ul class="thumbs">
		<li><a href="javascript:void(0)" onclick="switch_product_img('photo_1', 3);"><img src="ARTofWAR_BLK(3).jpg" alt="Black" /></a></li>
		<li><a href="javascript:void(0)" onclick="switch_product_img('photo_2', 3);"><img src="ARTofWAR_RED.jpg" alt="Red" /></a></li>
		<li><a href="javascript:void(0)" onclick="switch_product_img('photo_3', 3);"><img src="ARTofWAR_WHT.jpg" alt="White" /></a></li>
	</ul>
	
</div>

Note that for every “switch_proiduct_img” function in the onclick property, the
photo_# parameter needs to increment by one for each image.

CSS

In this example, I am centering the product viewer container for showcasing purposes only. In your scenario most likely it will be left aligned or right aligned next to the product name, price, description, and add to cart button. You may have to adjust this property accordingly to your scenario.

.photos {
	overflow: hidden;
	border: 10px solid #f0f0f0;
	padding: 10px;
	width: 400px;
	margin: 0 auto;
}

We will center align the logo with the container and products.

.photos img.logo {margin: 0 auto; display:block;}

Give the main product view image some white space with a light border at the bottom.

.photos div img {
	padding: 10px 0;
	margin: 20px 0;
	float: left;
	border-bottom: 1px solid #ddd;
}

Cropping the Thumbnails

What we will be doing, is taking our original large preview image and only showing a portion of the image to create the thumbnail effect. We are not actually shrinking the image but simply cropping it. We will add this effect using the overflow: hidden; property.

.photos ul.thumbs {
	margin: 0;
	padding: 0 0 0 10px;
	list-style: none;
	width: 390px;
	float: left;
}
.photos ul.thumbs li{
	width: 110px;
	height: 100px;
	margin: 0 10px 0 0;
	padding: 0;
	float: left;
	overflow: hidden;
	position: relative;
	border: 5px solid #ddd;
	text-align: center;
}
.photos ul.thumbs li img {
	position: absolute;
	top: -180px;
	left: -145px;
}

Lets finish this off by adding a hover effect for the modern browsers.

.photos ul.thumbs li:hover {
	border: 5px solid #888;
	-moz-opacity:.75;
	filter:alpha(opacity=75);
	opacity:.75;
}

Javascript Image Swap

Now we will add this simple javascript to make our switch.

<script language="javascript" type="text/javascript">
function switch_product_img(divName, totalImgs) {
	for (var i=1; i<=totalImgs; i  ) {
		var showDivName = 'photo_'   i;
		var showObj = document.getElementById(showDivName);
		if (showDivName == divName)
			showObj.style.display = 'block';
		else
			showObj.style.display = 'none';
		}
	}
</script>

Conclusion

This is a simple and smooth way to do some simple image swapping for the product detail pages. One downside of the CSS Cropping technique is that depending on the kind of image (how much white space it has, the positioning of the shot in the image, random width/height sizes, etc), it may not always crop well. Especially if you have a large site with multiple sized images, you may find it difficult to always get the best cropping position. If anyone has a better suggestion or a solution to clear this issue, I would love to hear about it~