zoukankan      html  css  js  c++  java
  • magento中如何实现产品图片放大效果

    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产品图片放大效果就出来了。

  • 相关阅读:
    Lucene的分页查询
    Lucene索引库的简单优化
    Lucene的排序搜索
    Axure RP 6.5学习记录(1)界面介绍
    Lucene的高亮器Highlighter
    关于Lucene以及索引和搜索的流程
    Lucene初体验
    linux 下 ansi_x3.41968 java 邮件附件乱码
    SQL Server DBA工作内容详解
    SQL Server 导出 insert into 脚本
  • 原文地址:https://www.cnblogs.com/focai/p/4549188.html
Copyright © 2011-2022 走看看