show another image on mouse over of the default image in category product list in magento

0
votes

I am developing a magento site. In my category products listing page (catalog/products/list.phtml). I need to implement swap image function on mouse over the default image...( here each product have 2 or more images and while mouse over the default image, should be show any of the other image )

I am new to this magento..

Does any one help me ..

1
phpjquerymagento

1 Answers

0
votes

from what i know magento only loads 1 image on the category page by default, the "small_image". if you want to display any other image you have to create a full instance of the product

$_product = Mage::getModel('catalog/product')->load([product id]);

then loop through the media gallery:

foreach ($_product->getMediaGalleryImages() as $image) {
  // assign the image you want to the product object
  $_product->setImage($image->getFile());
}

once you've done that you can access the new image using 

echo $this->helper('catalog/image')->init($_product, 'image')->resize(200, 350);

the above will return the image url of a cached version of the image with 200x350
assign this to a data attribute of your image and use javascript to change the img src on mouseover
you might want to consider preloading all these mouseover images using javascript to give the user the best possible experience