통화에서 두 이미지 목록입니다.phtml 젠토 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>

이 코드가 있지만 그것은 두 개의 이미지가 표시됩니다 consectively 과할 수 없습니다 분리되는 그들을 위한 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 answer

평면 테이블을 활성화하면 기본 이미지 (속성 코드 이미지) 이 플랫 테이블에 포함되지 않아 <?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();
                }
            });
        }
    }

.