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. python os模块(1)

    os模块主要处理文件和目录(文件夹)的创建.删除.检查判定.属性值修改.路径修改. (1)获取当前目录的两种方法 1 os.getcwd() os.path.abspath('.') (2)创建文件夹 ...

  2. centos minimal 开启无线网卡 & 查看IP

    minimal版本默认不启动网络,所以要自己配置. 配置过程很简单,编辑配置文件 vi /etc/sysconfig/network-script/ifcfg-eth0 需要更改两项 NM_CONTR ...

  3. mongodb中的副本集搭建实践

    准备运行1个主节点,2个从节点,从节点中其中是一个是仲裁节点(Arb). --oplogSize --oplogSize --oplogSize 其中application是副本集的名称,节点必须相同 ...

  4. Codeforces Round #316 (Div. 2) D. Tree Requests dfs序

    D. Tree Requests time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  5. python走起之第三话

    一. SET集合 set是一个无序且不重复的元素集 class set(object): """ set() -> new empty set object set ...

  6. 基础笔记5(file)

    file 可以是目录和文件(只是是java程序与系统的文件进行一种关联) File file1 = new File("f:/mytest", "test5.txt&qu ...

  7. 五大权限:UGO权限、SetUID SetGID Sticky、ACL权限、chattr(文件系统级别的权限)、SELINUX

    五大权限:UGO权限.SetUID SetGID Sticky.ACL权限.chattr(文件系统级别的权限).SELINUX   ======================文件属性以及ugo权限= ...

  8. 6个html5页面适配iphone6的技巧

    iphone6及iphone6plus已经出来一段时间了.很多移动端网站,以前写死body为320px的,现在估计也忙着做适配了. 大屏幕手机其实一直有,只是以前大家没怎么重视,移动端的H5页面大部分 ...

  9. kafka集群zookeeper集群详细配置

    http://www.cnblogs.com/luotianshuai/p/5206662.html

  10. ajax post 传参

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> ...