Bem vindo ao brockdev.com, não seja tímido compartilhe suas duvidas e conhecimento. :D

Efeito hover imagem para listas de produtos

Jonatan Machado Moderador Global, Administrador
editado August 2014 em JAVASCRIPT
Só alterar a parte que exibe a imagem no arquivo list.phtml ou outro desejado tipo os dos produtos novos new.phtml etc.
Efeito parecido com o da tricae e dafiti :mrgreen: quando pasar o mouse encima da foto ele muda para outra

<?php
$product = Mage::getModel('catalog/product')->load($_product->getId());
$helper = Mage::Helper('catalog/image');
foreach ($product->getMediaGalleryImages() as $image) {


}
?>
<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')->resize(135); ?>\" width=\"135\" height=\"135\" alt=\"<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>\"
onmouseover=\"this.src='<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $image->getFile())->resize(135); ?>';\"
onmouseout=\"this.src='<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>';\"/>
</a>


Quando for colocar a imagem dos produtos você coloca uma sequencia que a ultima seja a que vai aparecer no efeito hover

Demo: http://www.arsenalwebdesign.com/templat ... /index.php

Testado Magento 1.7.0.2
Arsenal Web Design.com
Desenvolvimento de Lojas Virtuais
Magento | Zend Framework | HTML5 | CSS3 | Blogs
image
E-mail: contato@brockdev.com

Comentários

Entre ou Registre-se para fazer um comentário.