1

onmouseout I want to display the second image of the product.

<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'); ?>"  onmouseover="this.src = '<?php echo $this->helper('catalog/image')->init($_product, 'small_image'); ?>';" 
                 onmouseout="this.src = '<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>';" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
</a>

i used this code but it will display two images consectively and i am unable to seperate them for onmouseover and onmouseout.

<?php 
$product = Mage::getModel('catalog/product')->load($_product->getId());

foreach ($product->getMediaGalleryImages() as $image) {
    echo var_export($image->getUrl());
} 
 ?>
  • what you mean by second. are taking about second image of gallery?Please clarify everything? – Amit Bera Mar 24 '16 at 7:07
1

try this with id

<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image'); ?>" id="imageid"  onmouseover="document.getElementById('imageid').src = '<?php echo $this->helper('catalog/image')->init($_product, 'small_image'); ?>';" 
                 onmouseout="document.getElementById('imageid').src = '<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>';" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />

for separate the images

<?php 
$product = Mage::getModel('catalog/product')->load($_product->getId());
$img=array();
foreach ($product->getMediaGalleryImages() as $image) {
    $img[]=$image->getUrl();
} 
?>

simple separate with $img[0] for first and $img[1] for second

  • not working.. and image is not called. only one images display which is in the source. – atifaltaf Mar 24 '16 at 7:01
  • because you are using same image for all. update answer – Qaisar Satti Mar 24 '16 at 7:06
2

In edition of @Qaisar answer

If you enable flat table then <?php echo $this->helper('catalog/image')->init($_product, 'image'); ?> does not give you image url because of Base image(attribute code image) does not included at flat table.

In order to image get image field value,you need to enable image at flat table. See How to add Image attribute in Product Flat Catalog

0

Try 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, 'image')->resize(135); ?>"
         width="135"
         height="135"
         class="product-image-first"
         alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"
        />
    <?php
/** @var Mage_Catalog_Model_Product $_product */
$_product->load('media_gallery');
$collection = $_product->getMediaGalleryImages();
foreach ($collection as $_image):
    if ($_image->getPosition() != 2) {
        continue;
    }
    ?>
    <img
        src="<?php echo $this->helper('catalog/image')->init($_product, 'image', $_image->getFile())->resize(135); ?>"
        width="135"
        height="135"
        class="product-image-second"
        alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>"
        style="display: none;"
        />
    <?php
endforeach;
?>

Add script at bottom of page:

    var productImagesFirst = document.querySelectorAll('.product-image');
    for (var key in productImagesFirst) {
        if (productImagesFirst.hasOwnProperty(key) && productImagesFirst[key] instanceof Element) {
            var productImage = productImagesFirst[key];
            console.log(productImage);
            productImage.addEventListener('mouseenter', function(e){
                var first = e.target.querySelector('.product-image-first');
                var second = e.target.querySelector('.product-image-second');
                if (second) {
                    first.hide();
                    second.show();
                }
            });
            productImage.addEventListener('mouseleave', function(e){
                var first = e.target.querySelector('.product-image-first');
                var second = e.target.querySelector('.product-image-second');
                if (second) {
                    first.show();
                    second.hide();
                }
            });
        }
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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