Multiple Image Viewer w/ Thumbnails
Blog » CSS/XHTML » Multiple Image Viewer w/ ThumbnailsMultiple Image Viewer w/ Thumbnails
November 7th, 2008
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:
- Brand Logo
- Large (Main) Product View
- 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~
Subscribe via RSS ,by email, or by twitter to get all upcoming
tutorials and articles delivered straight to you.
Bookmark or Share this Post!
Tags: Javascript, Tutorial
This entry was posted on Friday, November 7th, 2008 at 2:03 pm and is filed under CSS/XHTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Popular Posts
Recent Comments
Hmm.. I’ve used a similar (ish) technique before; I like the way you’ve done it, although, I’m a fan of unobtrusive scripting.
So if I was to do that, I’d just have the full size images (with possible captions) as my html:
and then I’d use say.. jQuery.. in order to add the thumbs:
$(”document”).ready(function(){
$(”.photos”).append(”)
$(”.photos”).find(”img”).each(function(){
$(this).hide();
$(this).parent().find(”.thumbs”).append(this).attr({
height: “100px”,
width: “100px”
}).bind(”click”, function(){
$(this).parent().find(”img”).hide().is(’[src='+$(this).attr("src")+']‘).show();
});
});
$(”.photos > img:first”).show();
});
(please note, the JavaScript isn’t tested.)
So, basically, i’d add the thumbnails only to the Audience to which they could be relevant; which is those users with JavaScript, otherwise, we just show the list of full size images. I’d probably use very similar css however.
Nice Tutorial anyhow.. Those are just my two bobs worth on it.
… okay, HTML didn’t like posting.
Micheil, thanks for your advice and input!~ You have a very good point about not neglecting users w/out js, Ill be looking into your sample code
Thanks!
Nice work - this method will work with any size image:
<div style="border:solid 5px #006f50; padding:5px; background-color:#d8e9cd; width:150px; height:150px; position:relative; text-align:center;overflow:hidden;" >
<!-- Centred inside a width of 150px with 5px padding all the way round -->
<div style="width:1000px; height:1000px;line-height:1000px;text-align:center; top:-420px; left:-420px; position:absolute; overflow:hidden;">
<img src='http://www.google.co.uk/intl/en_uk/images/logo.gif' style="vertical-align:middle;"> <!-- You need spaces to make it work in Firefox -->
</div>
</div>
You should see a 150px square with a centered image cropped inside it
This works well for me showing member photos where I don’t know the size or ratio of the contact photos and I want it to be a standard size for layout.
Simply replace the ImageURL with one of your own and check that it is centre-cropped.
Dominic, thanks for your input! Your vertical align effect seems to take care of my alignment issue
I will go ahead and implement it to my other projects now, thank you very much~
Hi there, thanks for the clear tutorial. The only problem I come across is the fact the images of the thumbs won’t appear in the designated full size area… Is it possible the javascript of my navigation is interfering with the image gallery script? Thanks in advance!
I can def take a look~ Do you have a link Daan?
Hi Soh,
Solved the problem! Will continue editing the rest of the site now… Anyway thanks for the offer!
Hello Soh,
Unfortunately I find another problem. I can’t get the thing working properly if I have multiple image galleries on a single page. Would you mind taking a look? http://www.praktijk.io/test.html Thanks!
D
Tremendous help, thank you for posting this! Not trying to look a gift horse in the mouth, but here’s an enhancement I’m (unsuccessfully so far) trying to build off of it if you have any ideas. I’m trying to have a dropdown where the pictures change depending on the state of the dropdown. For example, in your demo have a dropdown that has shirts as one option and pants as another. When you change it from shirts to pants, the thumbnails and main pic all change to a set of pants pics. Just thought I’d throw it out in case you ever wanted an enhancement!
Awesome! When you have the link please share it, I’m always looking to improve my skills
Hello Soh
I have the same problem as daan
Everything is working fine, until i press the thump to swap picture. Nothing happens.
The problem is with this line:
var showDivName = ‘photo_’ i;
it should have a ‘+’ in between ‘photo_’ and i. Like this:
var showDivName = ‘photo_’ + i;
Hello Soh
I’m looking for something very similar to this image viewer, but calling the images from a database instead of listing them, as this can constantly change and having a forward and back button either side of the tumbnail images. Can you help?
If i list the produst list code can someone help me place the multiple images coding in there because i have NO clue where to place it. Prostore is a little complicated for me.
.addedToCart {
background-color:#FFFAF4;
border:1px solid #E2A269;
margin-bottom:15px;
font-family:;
font-size:px;
color:#333333
}
.addedToCart A:link, .addedToCart A:visited, .addedToCart A:hover, .addedToCart A:active{
font-family:;
font-size:px;
color:#333333
}
This item was added to your cart
Photo Not Available
This item selling at eBay:
Listing Expires:
:
SKU:
N/A
ISBN:
MPN:
UPC:
Unit:
:
:
:
:
:
:
Price:
Price:
List Price: - Savings:
Price:
()
This item is out of stockin stock
Sale Ends:
E-mail a friend about this item.
Return to Catalog
I would appreciate with any help at all. Thanks.
nm the codes didn’t appear as i copied it. It won’t show up in this form
Can someone please check out my website and look at the coding in the produt detail page and explain to me what i can do to get multiple images. Thank you.
DulcetCouture.com
Amy
Hi,
Your code for showing the images is nice, i used it and looks good
Good one, galleries can be useful at times especially for projects etc
Thanks for posting them
Excellent information. Finding a few such solutions has taken hours in the past.
Thank u.