Вызовите два изображения в List.phtml в Magento 1.9.2.4

Question

onmouseout Я хочу отобразить второе изображение продукта.

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

.

Я использовал этот код, но он будет отображать два изображения, и я не могу отделить их для OnMouseOver и OnMouseout.

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

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

.

Answer 1

Попробуйте это с помощью 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) ?>" />

.

для отдельных изображений

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

.

Простая отдельная с $img[0] для первого и $img[1] для второго

Answer 2

в редакции @qaisar Ответ

Если вы включите плоскую таблицу, то <?php echo $this->helper('catalog/image')->init($_product, 'image'); ?> не дает вам URL-адрес изображений из-за базового изображения (изображение кода атрибута) не включено в плоскую таблицу.

Для того, чтобы изображение получить значение поля изображения, вам нужно включить изображение на плоской таблице. Посмотрите, как добавить атрибут изображения в плоском каталоге продукта

Answer 3

Попробуйте:

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

.

. Добавить сценарий в нижней части страницы:

    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();
                }
            });
        }
    }

.