Magento列表页用jQuery实现产品图片放大效果
今天看到个网站,鼠标移到列表页的产品图片上,旁边会弹出一个大图,感觉不错,就自己在Magento里写了个。先看看效果



这个效果比较好实现,打开list.phtml,把输出img那句话复制到<a>标签外面,加一个class,jQuery会用到

li if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(300 ,327); ?>" width="300" height="327" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" />
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(155 ,169); ?>" width="155" height="169" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></a>

……………………</li> 

然后在底部加上


<script type="text/javascript">
jQuery(".listhoverimg").css("display","none");
jQuery(".products-grid li:nth-child(1),.products-grid li:nth-child(2)").addClass("img1");
jQuery(".products-grid li:nth-child(3),.products-grid li:nth-child(4)").addClass("img2");
jQuery(".products-grid .product-image").hover(function(){
jQuery(this).siblings(".listhoverimg").css("display","block")
},function(){
jQuery(this).siblings(".listhoverimg").css("display","none")
} )
</script> 

这个简单的Magento产品图片放大效果就出来了。

posted on 2015-06-03 15:06  闪电王国  阅读(459)  评论(0编辑  收藏  举报