Magento Notes — Show thumbnail image without pop-up window
Finding ways to improve on the usability of tickon.com, I have made a small improvement. I thought it was quite annoying to always have to wait for a new window to open to view the alternate images, so did some googling and found the perfect fix on Magento forum (link to exact post). This fix simply allows you to click on the thumbnail alternate images and have it be shown in the large image box above. Without going through the discussion thread…here’s the quick fix:
Locate media.phtml in app/design/frontend/default/themename/template/catalog/product/view, and near line# 59, you should see:
<a href=”#” onclick=”popWin(’<?php echo $this->getGalleryUrl($_image) ?>’, ‘gallery’, ‘width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes’); return false;”><img src=”<?php echo $this->helper(’catalog/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->resize(120); ?>” alt=”<?php echo $this->htmlEscape($_image->getLabel()) ?>” title=”<?php echo $this->htmlEscape($_image->getLabel()) ?>” /></a>
change the part in red to the following:
<a href=”<?php echo $this->helper(’catalog/image’)->init($this->getProduct(), ‘image’, $_image->getFile()); ?>” title=”<?php echo $_product->getName();?>” onclick=”$(’image’).src = this.href; return false;”>
You should be able to modify it a bit more if you want the image to update on mouseover.

Thanks ! That helped me a lot, i hated this popup window !
hi,
Thanks for this…i actually used it and put in “onMouseover” instead of “onclick”…works great.
I can’t for the life of me get it to return to the normal image on mouseout…any advise there?
I could use some help. When I implemented this code, the additional images do not get resized to the product window and hence overflow on top of my price and product info. Thoughts? I”m not a php developer so it could be a simple fix.
You wanna post your site so that i can take a look at it and see if i can help? or email me?
Thanks for the quick reply. Here is the address of the site I am currently working on.
http://www.ichabodshollow.ca/faceandlips/lipscrubs/banana-lip-scrub.html
If you click on the additional product, you can see it overflows the box. Not sure if this is in the php code or if it’s a CSS thing.
Anybody? Thoughts?@Anthony
Hi Anthony,
I just had a chance to view your site. Nice looking site.
One thing that I noticed as I opened up your product details page is that the big image place holder doesn’t have a fixed width setup. For example in your code you have this block of code:
on my site you will notice a width of 265px set for the
tag:
Double click on above image to view full picture
That may be what is causing the problem.
Btw, I would be curious to know if the owner of site do drop ships as I would be interested in adding their products to my web site at http://www.tickon.com
Thanks.
Amazing. Thanks a lot for sharing.
Thanks for the sharing!!
I had i little problem while copying and pasting becouse the characters ’ and ‘ are a little bit different (the same to ” and “). Becouse of this i was receiving a Warning.