A-A+

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

2012年08月17日 灵犀一指 Magento产品列表页鼠标滑过图片自动放大效果已关闭评论 阅读 957 人 次

在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图片放大效果就可以实现了!

标签:

评论已关闭!