Monday, 2 September 2013

change product image on hover in catalog page Magento

To show different image on hover on magento product category page  you have to change the small code in the list.phtml file located at


app->design->frontend->default->your theme->template->catalog->product->list.pthml


and in this file around line 58 you will see something like 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>
      
       just search for this and replace it with
      
        <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(135); ?>" width="135" height="135" 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(135) ?>';" onmouseout="this.src='<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(135) ?>';" />
       
       
        that’s all we need to do
        note in list file there are two modes list and grid above will work for list mode to make it work in grid mode change it around line 95 in same file
       
       
Posted by at
Labels: , , , ,

9 comments:

  1. Web Developer4 March 2014 at 04:24

    it's not working on my site. any changes in admin section? Please reply.

    ReplyDelete
    Replies
    1. Rohit Goel7 March 2014 at 04:01

      Hi CHANDRABHUSHAN there is no such changes need to be done in admin , there must be some issue in code , can you please provide the code you have use in your list.phtml file so that i can assist you better.

      Delete
  2. Rohit Goel7 March 2014 at 04:01

    This comment has been removed by the author.

    ReplyDelete
  3. JydipSinh23 September 2015 at 21:23

    This comment has been removed by the author.

    ReplyDelete
  4. Andie26 January 2016 at 19:39

    This comment has been removed by the author.

    ReplyDelete
  5. Unknown3 October 2017 at 05:52

    Thanks, Working properly but it's showing only one hover image, I want to show multiple images on mouse hover, how can i do it? When mouse hover it should show first image then after one second second image then third image so on in magento 1.9 ?

    ReplyDelete
    Replies
    1. Rohit Goel11 October 2017 at 22:33

      Hi for that you have to customize the functionality . You need to get all gallery images of a product in a loop and keep that gallery in a hidden div and than show that div on hover.

      Thnaks

      Delete
  6. Anonymous7 February 2018 at 06:25

    Hello, the image change works really fine. I would like to have a smooth change so I tried it with: this.fadeIn='500'; but it doesn´t work. Any ideas?

    ReplyDelete
  7. david3 April 2022 at 08:22

    I would like to say that this blog really convinced me to do it! Thanks, very good post. product development company

    ReplyDelete

Subscribe to: Post Comments (Atom)