Change how images are displayed in the product details page?

djvern

2008-05-23 16:47

Hi,

Is it possible in the 'product details' page to show the big image (rather than the thumbnail), and any other images as small thumbnails, which when clicked on will update the big image? Basically I'm after similar functionality to this:

http://www.prestashop.com/demo/4-ipod-nano-cover-myglove.html

I like the other views idea rather than using a javascript popup image gallery or lightbox - is this possible in QC 2.2?

My attempt at integrating Quickcart is here:

http://www.something-shop.com/index_NEW.html

If you click on the first product you'll see I've added some extra images - if I could just get them linking to the single big image... any help as always would be great!

» Quick.Cart v2.x

djvern

2008-05-23 17:52

By the way, it's QuickCart 2.2 Extended I'm using if this helps...

Makaron

2008-05-24 10:47

It's really hard to do and only with using JavaScript or some other script language (maybe AJAX). Unfortunately I don't know any of it so I can't help You.

djvern

2008-05-24 13:47

If it's of use to anyone I managed to figure it out by adding a javascript image gallery from A List Apart (http://www.alistapart.com/articles/imagegallery). I added the following javascript to 'product_details.tpl':

[code]<script type="text/javascript" language="javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
</script>[/code]

and then I added:

[code]<img id="placeholder" src="$aList[sPhotoBig]" alt="" height="280" width="320" />
<p id="desc">image 1</p>[/code]

and I changed 'BEGIN PHOTOS_LIST to the following:

[code]
<div class="photo" id="l$aList[sStyle]"><a onclick="return showPic(this)" href="$aList[sPhotoBig]" title="other images"><img src="$aList[sPhotoSmall]" alt="$aList[sDescription]" title="$aList[sDescription]" /></a></div>
[/code]

Look here to see how it looks (click on the first product - I still need to sort the layout out!):
http://www.something-shop.com/index_NEW.html

It's probably not the most elegant solution but it works for me!