Magento change main image to any product picture on mouse over

By | April 3, 2012
Magento change main image to any product picture on mouse over Magento eCommerce Product image change on hover: mouseover: Magento have default feature that when u click on the product image it will get opened in new window so now you can show the product image into the main image on mouseover or on mouse

 click just search the code in app/design/frontend/default/yourtheme/catalog/product/view/media.phtml 

<li><a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a></li>

 

and repalce with

 

<li><a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $this->getName();?>" onmouseover="$('image').src = this.href; return false;" onclick="$('image').src = this.href; return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a></li>

 

this will show the thumbnail image into the main image on mouse over and on mouse click

14 thoughts on “Magento change main image to any product picture on mouse over

  1. Derrick

    Thank you for this Sandeep! Do you have a solution to change the main image when an attribute is selected. Lets say, if it was a t-shirt and the red option is chosen, the picture of the red t-shirt will move to the main image area. I’m looking to modify code and not install an extension. Any help would be greatly appreciated! Thanks!

    Reply
  2. Sandeep Gulati

    are you using the configurable product ? to show the image base on color….if you don’t need to use extension you need to write some java script code and pass the attribute id along with value you have selected to show the images and make sure that images should be there in your database

    Reply
    1. Derrick

      Yeah, I’m using configurable product. I don’t want to use an extension cause I would have to re upload all my products again. Each option already has its own images and its all in the database. I tried Simply Configurable products, but since my products weren’t uploaded the way the extension wanted, the options weren’t showing up. Any resources on where I could learn more about the code and id that your talking about? Thanks!

      Reply
  3. Aaron

    This is exactly what I needed. Thank you so much for posting this for everyone to use.

    For others who are curious about changing the main image based on changing an attribute (like color) I have found success with EasySwitcher https://github.com/tzyganu/Switcher (free). Simple Configurable Products didn’t work correctly with Magento CE 1.8.

    Reply

Leave a Reply