首页 » ZenCart » ZenCart教程 » 阅读文章
ZenCart产品页多图片展示效果
标签:Zen Cart教程,多图展示
这里介绍的zencart产品多图展示效果,就是利用lightbox,jqzoom,然后调整css来实现图片放大镜,多图切换,图片lightbox弹出层效果。
效果图一、
效果图二、
下载
jqzoom+lightbox多图展示.zip (96.6 KB, 1,384 次)
安装方法:
1.(更正)默认模板classic改名为你自己的模板名,(ps:压缩包中忘记将classic改为YOUR_TEMPLATE了)
2.后台导入install_JQLightBox.sql和install_JQZoom.sql
3.后台开启lightbox和zoom
4.includes\templates\YOUR_TEMPLATE\templates\tpl_product_info_display.php删除原主图和细节图显示的代码,然后适当位置加入tpl_product_info_display_ADD.php内容。
5.以下添加到css
.pimages{ border: 1px solid #D9D9D9; width:350px; padding:2px; } .pimages p{ text-align:center; } .additionalImages{ border: 1px solid #D9D9D9; padding:2px; margin:0 2px;}
声明: 本文由Ezencart原创,转载请保留链接:ZenCart产品页多图片展示效果
评论 共56条 (RSS 2.0) 发表评论
老大,安装上面装了,可是都没有反应啊,能否具体告诉我一下呢,,
后台开启lightbox和zoom没,有没什么错误提示。
开启了,可是就是没反应,
看看js加载没有,看看文件漏了没有,看看是不是自己模板的问题,只能自己排查了,我测试是正常的
后台怎么开启开启lightbox和zoom ?
谢谢啊,,我再试试,,
老大 跟你上面第一幅图的效果一样 下面的小图怎么让他排成一行呢 有没有插件实现呢!!
排成一行是css控制的,后台把细节图每行显示个数调大,然后css控制,安装包里我都调整好了的
十分谢谢!!
4.includes\templates\YOUR_TEMPLATE\templates\tpl_product_info_display.php删除原主图和细节图显示的代码,然后适当位置加入tpl_product_info_display_ADD.php内容。
这个适当位置在哪里?
我的模板显示图片的是:
get_template_dir(‘/tpl_modules_main_product_image.php’,DIR_WS_TEMPLATE, $current_page_base,’templates’). ‘/tpl_modules_main_product_image.php’);
?>
那个怎么加阿?
适当位置,就是你随便加,然后前台看效果,位置不满意在移动。
不能切换图片???是什么原因??
提示语法错误,怎么办
急死我了啦。
谢谢,可以了。
跟原来自带的冲突了。
安装了主图可以放大,但是图片不能切换,怎样调整css来实现多图切换?
后台开启lightbox和zoom后,图片的切换,是鼠标放在要显示的图片上实现的,放在要显示的图片上时,此图会切换到中图的位置上
用倒是能用 不过产品图片变形了 要怎么修改??
图片变形是由于设置的宽高不是按比例缩放的造成的,检查下css只设置宽或高的大小
搞定了。。。这个没有那个无插件的好看
楼主,你好,这个插件我装好了,可以用,效果也非常不错的,首先非常感谢楼主提供的这款插件。
现在,我想修改个功能:图片切换的时候不要进行主图与小图的切换,而是所有的图片在下面显示,当鼠标移到那个图片上,就显示哪个图片,麻烦楼主指点怎么修改,非常感谢!!!
去懒人图库之类的网站找类似的代码,整合到zencart里喽
我去懒人图库找了的,貌似没找到相关的JS代码,有劳楼主帮忙一下,找到链接给我一下,非常感谢
我就是想在你这个插件的基础上修改的,切换的功能是通过什么原理实现的,具体的代码在哪边,我想修改的,但是代码找不到
装上去很顺利,效果也能显示,但是跟支付页面有冲突了,选择运费后,总价格不能自动调整,提交付款后不跳转到支付页面,为什么呀
在全新zencart上调试,排除你自己的模板问题。
为什么我主图跟多图不能切换?
在全新zencart上调试,排除你自己的模板问题。在检查js是否全部加载了,加载的顺序
5.以下添加到css
查看源代码打印帮助1 .pimages{
2 border: 1px solid #D9D9D9;
3 width:350px;
4 padding:2px;
5 }
6 .pimages p{
7 text-align:center;
8 }
9 .additionalImages{
10 border: 1px solid #D9D9D9;
11 padding:2px;
12 margin:0 2px;}
楼主这个CSS加到哪里?我是菜鸟,麻烦详细一点,谢谢了~!
楼主不用了,我已经弄好了,只是图片都要上传到/image 目录下,上传目录选择:main directory,这样才能正常显示,非常感谢楼主!
好像上传图片的默认目录是large,
可以看到这里http://www.ezencart.com/pages/589.html 看看,图片调用的原理,由于这个里要实现大中小图的切换,所有3份图片必须都有。
这个不适用于zencart1.3.9插件版吧?
中文插件版没有测试,应该也是可以的。
中文插件版的Lite系列模板测试了不行,没有插件版的原始模板测试可以用,不知楼主是否能制作一个插件版的模块?
你可以找类似效果,集成到zencart,这种js效果网上还是比较多的。
楼主你好!请问首页header_bg.jpg 这个图片下面的空白怎么去掉?我在css里面找了半天都找不到在哪里修改
汗死,找了半天原来是这个,谢谢楼主!
这个插件如果加上细节图滚动插件时,lihgtbox会显示重复的细节图,就是原本5张细节图,Lihgtbox会显示10张图,请问楼主这个怎么修改呢?
老大好,这个插件很好用,
1)好像本身集成了 CJloader的功能,在html_header.php吧?
2)但是,当我要再装个 fast and easy checkout 时,要预先需要装个 CJLOADER 模块, 这下就有冲突了。
问题出现于,我装了jqlight + jqzoom + 新装的cjloader,
在 html_header.php,中
原先的 有cjloader 功能的语句
那新的 这个语句 还要吗?
感觉要的话 ,就会出现 产品详细页的大图 鼠标第一次挪到大图上的话 放大出来的将是一闪的图片,再即变成空白的了, 挪出来再挪上去,就好好的
这该怎么办?
装fast and easy checkout时,不装CJLOADER 模块试试看能不能拿共用喽
老大我安装完成 怎么后台没有显示 让我开启的lightbox和zoom 啊,还有我下载下来的文件,没有哪个文件的名字是.YOUR_TEMPLATE 可让我改的, 倒是有classic 的文件夹。
楼主~鼠标移动到细节图他会自动更换主图。我想静止掉细节图这样的功能。请问在哪个文件修改?如何修改?
可以用http://www.ezencart.com/pages/786.html插件
你好,为什么我安装的有问题呢? 就是点击页面进去,鼠标移到主图上可实现放大,但我要切换细节图的时候,他就一直在加载,显示不出来,非得手动刷新才能正常,像我这种情况是什么原因造成的呢? 求帮忙,谢谢先
就是主图和细节图可正常切换,但鼠标移上去就是不能放大,没反应,点击的话就一直在加载。。。
我刚又试了下,发现点击页面进去,鼠标移到主图的时候是现实空白的,然后主图和细节图切换下后,只能放大主图,细节图都不能放大?不知是什么原因
(更正)默认模板classic改名为你自己的模板名,(ps:压缩包中忘记将classic改为YOUR_TEMPLATE了)
用默认模板测试成功,你先排除你自己模板的问题,图片大中小图齐全,测试
你好,我刚刚试了下,默认模版也是正常的,我觉得不是模板的问题,好像是根目录inages那个文件夹下的问题,我想问我的产品图片要怎么放啊?或者命名有什么要求,我目前的命名是这样的:001.jpg, 001_1.jpg, 001_2.jpg
默认模板是正常的,说明插件时没问题了,剩下就要从自己的网站上着原因了
大神,我的安装上去了,但是在弹出的大图中,一直点击,点到最后一张的时候会跳转到主页去,不会留在当前的页面上 这个是什么原因呀?
测试了,大图到最后一张,在点击右边的时候,是关闭弹出层的,没有跳转
后台开启lightbox和zoom ? 这个是哪儿开启呀,我找不到
我是v1.5.1 的 数据库已经倒入 但后台找不到开启lightbox和zoom
这个插件不支持1.5版的
什么时候开发1.5版本的