llamar a dos imágenes en list.phtml en magento 1.9.2.4
-
29-09-2020 - |
Pregunta
onmouseout
Quiero mostrar la segunda imagen del producto.
<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>
Utilicé este código pero mostrará dos imágenes de forma consecutiva y no puedo separarlas para onmouseover y onmouseout.
<?php
$product = Mage::getModel('catalog/product')->load($_product->getId());
foreach ($product->getMediaGalleryImages() as $image) {
echo var_export($image->getUrl());
}
?>
Solución
prueba esto con identificación
<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) ?>" />
para separar las imágenes
<?php
$product = Mage::getModel('catalog/product')->load($_product->getId());
$img=array();
foreach ($product->getMediaGalleryImages() as $image) {
$img[]=$image->getUrl();
}
?>
simple separado con $img[0]
por primera y $img[1]
por segundo
Otros consejos
En edición de @qaisar responde
Si habilita la tabla plana, entonces <?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>
no le da la URL de imagen debido a la imagen de la imagen de (Imagen de código de atributo) no se incluye en la tabla plana.
Para obtener la imagen, obtenga el valor del campo de la imagen, debe habilitar la imagen en la tabla plana. Vea cómo agregar Atributo de imagen en el catálogo plano del producto
Intenta esto:
<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;
?>
Agregar script en la parte inferior de la página:
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();
}
});
}
}