Thread: Multi Images On Product Pages

What I would like to do is on my product pages where I have multiple images is than have the small icons with [0] [1] etc..
is to have the icons as mini thumbnails of the image all lined up next to it.

for example

--------- | --------------
-image- | -s.image1-
--------- | --------------
--------- |
--------- | --------------
--------- | -s.image2-
--------- | --------------

so the main image is shown (the default medium image) and along side it on the right I would want the multi images to be shown as small thumbnails where clicking on them would show them in the medium image section.

Is this possible, if so how?

Many thanks in advance.

In fact here is an ASPDOTNETStorefront site doing what I am looking for...
http://www.urbanexcess.com/p-4318-wo...cap-brown.aspx

with the extra images down the right next to the main image.

How can this be done?

Thanks again.

The XML package used to render that page has been customized a bit, but the basic idea is doable without too much work. First you'll need to set the UseImagesForMultiNav AppConfig to true, so we use the images instead of the number icons. Then set the MicroStyle AppConfig the way you want. Look at the example at the bottom of this page.

e-tradecounter,

That site uses a totally custom approach with jQuery zoom and a simple image swap that reads from the rev element in the link. This is basically what we do as well, but with the choice for lightbox or image swapping, depending on the product template.


Bottom of page source:

Code:

	$(document).ready(function() {
		var zoptions =
		{
			zoomWidth: 350,
			zoomHeight: 455,
			hideEffect: 'fadeout',
			position: 'left',
			title: false,
			preloadImages: false
		}
		$('.product_gallery_image a,.last_product_gallery_image a').click(function () {
			$('.product_image_cell a').attr("href",$(this).attr("rel"));
			$('.product_image_cell img').attr("src",$(this).attr("rev"));
			$('.UEZOOM').jqzoom(zoptions);
		});
	
		$('.UEZOOM').jqzoom(zoptions);
	});

The missing piece of the puzzle is that you need to change the Core method that outputs the image presentation code. I'd show you, but it's not allowed here. I use an unordered list; the hat place uses a table...

All this information has been spot on and perfect thanks so much for your help I will have a play until we get the look we like. Thanks again everyone!

hello everyone ... I am using jquery cloud zoom (http://www.professorcloud.com/mainsite/cloud-zoom.htm) works well with an image but when the product has multiple images only shows the first image with the zoom.