UPDATE: For a smoother transistion see my solution that uses jQuery here: http://blog.kineticpulse.co.uk/2011/02/create-smoother-mouseover-effect-on.html
Merry Christmas & Happy Holidays everyone! As a small present for you all here’s how to create a neat effect to showcase your products better in a Magento catalog view.
The client had wanted to mimic the functionality she had seen on the ASOS (?) site where when you mouse over a picture of a product in the category view it shows you an alternate product view.
Here is a solution I have come up with to do this in Magento.
In the file \app\design\frontend\YOURTHEME\default\template\catalog\product\list.phtml
locate the two lines that generate the product thumbnails – in my theme and version 1.4.1.1 of Magento they are lines 52 and 93. You need to add the following javascript commands to the onmouseover and onmouseout events of the product image tag, so the following code is what I use for the the product links & images:
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(217); ?>" width="147" height="217" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" onmouseover="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(217) ?>';" onmouseout="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(217) ?>';" />
</a>
Note: I am constraining my pictures to be no more than 217 px wide – you will need to update this to reflect your design.
Explanation
The onmouseover event is getting the product image that is specified as the “thumbnail” image for the product and switching the source of the product image to be that. The onmouseout event is (hopefully) restoring this image back to the original product image (the one that is specied as the small image on the product)
Considerations for use
- Each product will obviously need a different small image & thumbnail image for this to work. Ideally of the same dimensions. The good thing about this approach is that the user will see no difference if there is only one product image per product
- This process could be improved by using a JQuery aniation to smooth the transition, I just haven’t done it here!
- Assuming that the Magento theme you are using is not much different from the default one – this should reflect across the catalog search pages as well.
See it in action here: http://www.miminoor.com/denim.html
As always I love to hear your feedback!
Hi Laura,
I'm trying to get this feature work in list.phtml, but somehow it doesn't seem to work. Could you please help me on this one? For the grid view in the list.phtm I changed this:
{a href="{?php echo $_product-}getProductUrl() ?}" title="{?php echo $this-}stripTags($this-}getImageLabel($_product, 'small_image'), null, true) ?}" class="product-image"}{img src="{?php echo $this-}helper('catalog/image')-}init($_product, 'small_image')-}resize(135); ?}" width="135" height="135" alt="{?php echo $this-}stripTags($this-}getImageLabel($_product, 'small_image'), null, true) ?}" /}{/a}
to:
{a href="{?php echo $_product-}getProductUrl() ?}" title="{?php echo $this-}stripTags($this-}getImageLabel($_product, 'small_image'), null, true) ?}" class="product-image"}{img src="{?php echo $this-}helper('catalog/image')-}init($_product, 'small_image')-}resize(135); ?}" width="135" height="135" alt="{?php echo $this-}stripTags($this-}getImageLabel($_product, 'small_image'), null, true) ?}" onmouseover="this.src='helper('catalog/image')-}init($_product, 'thumbnail')-}constrainOnly(FALSE)-}keepAspectRatio(TRUE)-}keepFrame(FALSE)-}resize(135)';"/}{/a}
Onmouseover should show the thumbnail image.
(I Changed < to { and > to } because of posting errors)
Hope you can help me!
Thanks a lot,
Michael
Hi Michael,
Sorry to hear you were having problems – I've updated the post above to include the whole <a> tag around the product picture in list.phtml to see if that helps!
(I too was having problems posting code fragments here!)
HTH
Laura
Hi Laura,
Many thanks. Your post update helped a lot. It's working great now. A future update with a smooth transition would be nice though!
Regards,
Michael
Hi Michael,
Here you go a smaoother transition using jQuery just for you :
http://blog.kineticpulse.co.uk/2011/02/create-smoother-mouseover-effect-on.html
HTH
Laura
Ok so I have managed to get this to work.. many thanks-:) I do have a question though, is it possible to make the mouseover image become larger than the original?