Magento产品列表页鼠标滑过图片自动放大效果

共计 1250 个字符，预计需要花费 4 分钟才能阅读完成。

在Magento产品列表页面用JQuery实现放大图片的效果，这里简单说明一下修改方法：

在list.phtml，把输出images那段代码复制到<a>标签外面,加一个class，jQuery会用到这个类：

<img src=”<?php echo $this->helper(‘catalog/image’)->init($_product, ‘small_image’)->resize(360); ?>” width=”360″ height=”360″ alt=”<?php echo $this->stripTags($this->getImageLabel($_product, ‘small_image’), null, true) ?>” />
<a href=”<?php echo $_product->getProductUrl() ?>” title=”<?php echo $this->stripTags($this->getImageLabel($_product, ‘small_image’), null, true) ?>”><img src=”<?php echo $this->helper(‘catalog/image’)->init($_product, ‘small_image’)->resize(200); ?>” width=”200″ height=”200″ alt=”<?php echo $this->stripTags($this->getImageLabel($_product, ‘small_image’), null, true) ?>” /></a>

然后在页面的底部加上下面JQuery代码：
<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.4.2.min.js”></script>
<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>

这样简单的JQuery图片放大效果就可以实现了！