appel deux images dans la liste.phtml dans magento 1.9.2.4

Question

onmouseout Je veux afficher la deuxième image du produit.

<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>

j'ai utilisé ce code, mais il affiche deux images consectively et je suis incapable de les séparer pour onmouseover et onmouseout.

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

foreach ($product->getMediaGalleryImages() as $image) {
    echo var_export($image->getUrl());
} 
 ?>

Answer 1

essayez-le avec les 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) ?>" />

pour séparer les images

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

simple séparée avec $img[0] pour la première et la $img[1] pour la deuxième

Answer 2

Dans l'édition de @Qaisar répondre

Si vous activez la table à plat alors <?php echo $this->helper('catalog/image')->init($_product, 'image'); ?> ne vous en donne pas l'url de l'image en raison de Image de Base(code de l'attribut de l'image) ne sont pas inclus à table plate.

Afin d'image de l'image de domaine de la valeur,vous devez activer l'image à la table à plat.Voir Comment ajouter L'Image de l'attribut de Produit Plat de Catalogue

Answer 3

Essayez ceci:

<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;
?>

Ajouter un script en bas de 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();
                }
            });
        }
    }