I am trying to change the image on hover for product in listing page for one of our Magento Eshop. I can change the image on hover. What i did was i used small and thumbnail image for it and changed it using mouseenter and mouseleave event.

But now i want to change it based on sort order. Say the image with Sort Order 2 should be visible on hover.

I am not sure how to do it ? Could anyone please guide me on this. From where shall i start ?


4 Answers 4


I was able to solve it. I am pasting the code below for what i did.

Step 1 : Created an helper file and have added this code in there

class Greeting_Products_Helper_Data extends Mage_Core_Helper_Abstract
    function altImage($product, $val, $w, $h, $imgVersion='small_image'){
    $column = 'position';
    $value = $val;
    $gal = $product->getMediaGalleryImages();
    if ($gal = $product->getMediaGalleryImages())
        if ($altImg = $gal->getItemByColumnValue($column, $value))
            '<img class="alt-img lazyOwl"  style="display:none;" src="' . $this->getImg($product, $w, $h, $imgVersion, $altImg->getFile()) . '" alt="' . $product->getName() . '" />';

    return '';


Please review the code. It will pretty much explain everything.

To call the alternative image use the following code :

echo $this->helper('greeting_products')->altImage($_product,2,220,220);

Here 2 is the position of image and rest are the image parameters


Follow the below code you can got the all detail of your media Gallery with sort id. Then after you can manage as per your requirement.

     foreach ($this->getGalleryImages() as $_image){

Hope you got the proper Solution.

  • i guess you are talking about getMediaGalleryImages()... i tried it... but the thing is how can i get the URL of the image whose position is say 2?... could you please let me know on it
    – Dexter
    Commented May 29, 2014 at 8:54

here total solution: first all gallery images of products:


Second: exclude disabled images from gallery image collection and sort by default position


    foreach ($ImageColl as $ii => $image) {

third: to get second gallery image:

foreach ($sorter as $ii => $va) {


and $secondimg gives second image

  echo "<pre>";
echo "</pre>"; 

enter image description here


You may use built in Magento's functionality

$_subImages = $_product->getMediaGalleryImages('images')->setOrder('position','ASC');
foreach ($_subImages as $imgKey => $subimage) {
    #Your code 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.