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

magento中如何实现产品图片放大效果的更多相关文章

  1. 为BlueLake主题增加图片放大效果

    fancyBox 是一个流行的媒体展示增强组件,可以方便为网站添加图片放大.相册浏览.视频弹出层播放等效果.优点有使用简单,支持高度自定义,兼顾触屏.响应式移动端特性,总之使用体验相当好. 现在,我们 ...

  2. js图片放大效果

    实现购物网站里的图片放大效果,jqzoom很好用.今天才接触它,很快就上手了.看了一个示例,在放大图像上方貌似有水印,后经排查,原来是图片的标题,然后设置title为false,搞定.

  3. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  4. [原创]实现android知乎、一览等的开场动画图片放大效果

    代码下载地址: https://github.com/Carbs0126/AutoZoomInImageView 知乎等app的开场动画为:一张图片被显示到屏幕的正中央,并充满整个屏幕,过一小段时间后 ...

  5. jQuery实现网站图片放大效果

    实现效果:当鼠标指向商品图片时,图片会自动放大. <!DOCTYPE html> <html> <head> <meta charset="UTF- ...

  6. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  7. iOSUITableView头部带有图片并且下拉图片放大效果

    最近感觉UITableview头部带有图片,并且下拉时图片放大这种效果非常炫酷,所以动手实现了一下,效果如下图: 1.gif 实现原理很简单,就是在UITableview上边添加一个图片子视图,在ta ...

  8. 【前端】特效-Javascript实现购物页面图片放大效果

    实现效果 实现代码: <!DOCTYPE html> <html> <head> <title>购物图片放大</title> <met ...

  9. (JS+CSS)实现图片放大效果

    代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单 <div id="outer"> <p>点击图片</p> &l ...

随机推荐

  1. Exchange Server 2013就地存档

    9.1就地存档 就地存档有助于重新获得对组织邮件数据的控制,而无需个人存储 (.pst) 文件,并且允许用户在可通过 Microsoft Outlook 2010及更高版本和 Microsoft Of ...

  2. ReactiveCocoa(RAC)

    好处:代码高聚合,方便我们管理: 链式编程: CaculatorMaker.h #import <Foundation/Foundation.h> #define ADD #define ...

  3. iOS 圆角图片

    // 开启图形上下文UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);// 剪裁 UIBezierPath *path=[UIBezi ...

  4. Linux IO实时监控iostat命令详解

    简介 iostat主要用于监控系统设备的IO负载情况,iostat首次运行时显示自系统启动开始的各项统计信息,之后运行iostat将显示自上次运行该命令以后的统计信息.用户可以通过指定统计的次数和时间 ...

  5. (转)PowerDesigner提示Existence of index、key、reference错误

    建立一个表后,为何检测出现Existence of index的警告    A table should contain at least one column, one index, one key ...

  6. 关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件

    找了这么久资料,总算解决了 感谢博客园:http://www.cnblogs.com/xsht/p/5275081.html 感谢百度:http://zhidao.baidu.com/link?url ...

  7. Django1.9开发博客(6)- 模板继承

    模板继承就是网站的多个页面可以共享同一个页面布局或者是页面的某几个部分的内容.通过这种方式你就需要在每个页面复制粘贴同样的代码了. 如果你想改变页面某个公共部分,你不需要每个页面的去修改,只需要修改一 ...

  8. java并发编程-Executor框架

    Executor框架是指java 5中引入的一系列并发库中与executor相关的一些功能类,其中包括线程池,Executor,Executors,ExecutorService,Completion ...

  9. /proc/stat文件详解(翻译)

    原文地址:http://www.linuxhowtos.org/System/procstat.htm 各种关于系统内核的活动信息都可以在/proc/stat文件中找到,该文件记录了自系统第一次启动以 ...

  10. C语言指针

    我是搞java的,今年要找工作,参加笔试就必须要准备一些C/C++.算法.数据结构.操作系统.概率论的东西,浅谈一下我作为初学者对C指针的学习和理解. 一.*p 概念: 申明一个整形指针变量: int ...