magento 1.9.2.4のlist.phtml内の2つの画像を呼び出します
-
29-09-2020 - |
質問
onmouseout
商品の2枚目の画像を表示したいです。
<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>
このコードを使用しましたが、2つの画像が連続して表示され、onmouseoverとonmouseoutでそれらを分離することができません。
<?php
$product = Mage::getModel('catalog/product')->load($_product->getId());
foreach ($product->getMediaGalleryImages() as $image) {
echo var_export($image->getUrl());
}
?>
解決
これを試してみてください 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]
二番目に
他のヒント
の版では @Qaisarの答え
フラットテーブルを有効にすると、 <?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>
画像の URL は提供されません。 ベース画像(属性コード画像) フラットテーブルには付属しません。
画像フィールドの値を取得するには、フラット テーブルで画像を有効にする必要があります。追加方法を参照してください 製品フラット カタログの画像属性
これを試して:
<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();
}
});
}
}
所属していません magento.stackexchange