zen-cart网站,模版,采集,二次开发

首页 » ZenCart » ZenCart教程 » 阅读文章

ZenCart产品页多图片展示效果

2011-07-23 11:41 269031 56 发表评论
标签：，


这里介绍的zencart产品多图展示效果，就是利用lightbox，jqzoom，然后调整css来实现图片放大镜，多图切换，图片lightbox弹出层效果。

效果图一、

效果图二、

下载

  jqzoom+lightbox多图展示.zip (96.6 KB, 1,383 次)

安装方法：

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;}
相关日志：

评论 共56条 (RSS 2.0) 发表评论

  1. xiami 说道：
    2011/08/05 15:27

    老大，安装上面装了，可是都没有反应啊，能否具体告诉我一下呢，，

    回复
  2. xiami 说道：
    2011/08/12 08:47

    谢谢啊，，我再试试，，

    回复
  3. seo=ceo 说道：
    2011/08/15 23:04

    老大 跟你上面第一幅图的效果一样 下面的小图怎么让他排成一行呢 有没有插件实现呢！！

    回复
    • E-zencart 说道：
      2011/08/16 09:14

      排成一行是css控制的，后台把细节图每行显示个数调大，然后css控制，安装包里我都调整好了的

      回复
      • seo=ceo 说道：
        2011/08/18 22:50

        十分谢谢！！

        回复
      • 瘦脸 说道：
        2012/05/09 16:13

        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’);
        ?>

        那个怎么加阿？

        回复
        • E-zencart 说道：
          2012/05/09 17:42

          适当位置,就是你随便加，然后前台看效果，位置不满意在移动。

          回复
  4. 我 说道：
    2011/08/22 19:57

    不能切换图片？？？是什么原因？？

    回复
  5. linyame 说道：
    2011/09/11 15:40

    提示语法错误，怎么办

    回复
  6. linyame 说道：
    2011/09/11 15:41

    急死我了啦。

    回复
  7. linyame 说道：
    2011/09/11 15:57

    谢谢，可以了。
    跟原来自带的冲突了。

    回复
  8. lsj 说道：
    2011/09/23 22:07

    安装了主图可以放大，但是图片不能切换，怎样调整css来实现多图切换？

    回复
    • E-zencart 说道：
      2011/09/23 22:34

      后台开启lightbox和zoom后，图片的切换，是鼠标放在要显示的图片上实现的，放在要显示的图片上时，此图会切换到中图的位置上

      回复
  9. shorgan 说道：
    2011/10/02 22:05

    用倒是能用 不过产品图片变形了 要怎么修改？？

    回复
    • E-zencart 说道：
      2011/10/03 17:59

      图片变形是由于设置的宽高不是按比例缩放的造成的，检查下css只设置宽或高的大小

      回复
  10. xiaokun 说道：
    2012/01/09 16:31

    楼主，你好，这个插件我装好了，可以用，效果也非常不错的，首先非常感谢楼主提供的这款插件。
    现在，我想修改个功能：图片切换的时候不要进行主图与小图的切换，而是所有的图片在下面显示，当鼠标移到那个图片上，就显示哪个图片，麻烦楼主指点怎么修改，非常感谢！！！

    回复
    • E-zencart 说道：
      2012/01/09 18:06

      去懒人图库之类的网站找类似的代码，整合到zencart里喽

      回复
      • xiaokun 说道：
        2012/01/09 22:46

        我去懒人图库找了的，貌似没找到相关的JS代码，有劳楼主帮忙一下，找到链接给我一下，非常感谢

        回复
  11. xiaokun 说道：
    2012/01/12 21:30

    我就是想在你这个插件的基础上修改的，切换的功能是通过什么原理实现的，具体的代码在哪边，我想修改的，但是代码找不到 :razz:

    回复
  12. sekindy 说道：
    2012/02/08 10:08

    :cry: 装上去很顺利，效果也能显示，但是跟支付页面有冲突了，选择运费后，总价格不能自动调整，提交付款后不跳转到支付页面，为什么呀

    回复
  13. sunny 说道：
    2012/02/24 12:02

    为什么我主图跟多图不能切换？

    回复
    • E-zencart 说道：
      2012/02/24 14:33

      在全新zencart上调试，排除你自己的模板问题。在检查js是否全部加载了，加载的顺序

      回复
  14. css 说道：
    2012/03/01 02:49

    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加到哪里？我是菜鸟，麻烦详细一点，谢谢了~！

    回复
    • css 说道：
      2012/03/01 03:36

      楼主不用了，我已经弄好了，只是图片都要上传到/image 目录下，上传目录选择：main directory,这样才能正常显示，非常感谢楼主！

      回复
      • css 说道：
        2012/03/01 03:49

        好像上传图片的默认目录是large, :?: :?: :?:

        回复
        • E-zencart 说道：
          2012/03/01 09:17

          可以看到这里http://www.ezencart.com/pages/589.html 看看，图片调用的原理，由于这个里要实现大中小图的切换，所有3份图片必须都有。

          回复
  15. css 说道：
    2012/03/01 16:36

    这个不适用于zencart1.3.9插件版吧？

    回复
    • E-zencart 说道：
      2012/03/01 17:18

      中文插件版没有测试，应该也是可以的。

      回复
      • css 说道：
        2012/03/04 13:30

        中文插件版的Lite系列模板测试了不行，没有插件版的原始模板测试可以用，不知楼主是否能制作一个插件版的模块？ :???:

        回复
        • E-zencart 说道：
          2012/03/05 17:13

          你可以找类似效果，集成到zencart，这种js效果网上还是比较多的。

          回复
          • css 说道：
            2012/03/07 15:57

            楼主你好！请问首页header_bg.jpg 这个图片下面的空白怎么去掉？我在css里面找了半天都找不到在哪里修改

            回复
  16. abc 说道：
    2012/04/12 15:51

    这个插件如果加上细节图滚动插件时，lihgtbox会显示重复的细节图，就是原本5张细节图，Lihgtbox会显示10张图，请问楼主这个怎么修改呢？

    回复
  17. 123q1q1q 说道：
    2012/04/21 17:01

    老大好，这个插件很好用，
    1）好像本身集成了 CJloader的功能，在html_header.php吧？
    2）但是，当我要再装个 fast and easy checkout 时，要预先需要装个 CJLOADER 模块， 这下就有冲突了。
    问题出现于，我装了jqlight + jqzoom + 新装的cjloader,
    在 html_header.php,中
    原先的 有cjloader 功能的语句
    那新的 这个语句 还要吗？

    感觉要的话 ，就会出现 产品详细页的大图 鼠标第一次挪到大图上的话 放大出来的将是一闪的图片，再即变成空白的了， 挪出来再挪上去，就好好的

    这该怎么办？

    回复
    • E-zencart 说道：
      2012/04/22 14:47

      装fast and easy checkout时，不装CJLOADER 模块试试看能不能拿共用喽

      回复
  18. kale888 说道：
    2012/04/25 03:00

    老大我安装完成 怎么后台没有显示 让我开启的lightbox和zoom 啊，还有我下载下来的文件，没有哪个文件的名字是.YOUR_TEMPLATE 可让我改的， 倒是有classic 的文件夹。

    回复
  19. yahoogoogle 说道：
    2012/07/15 21:09

    楼主~鼠标移动到细节图他会自动更换主图。我想静止掉细节图这样的功能。请问在哪个文件修改？如何修改？

    回复
  20. polly 说道：
    2012/07/18 23:05

    你好，为什么我安装的有问题呢？ 就是点击页面进去，鼠标移到主图上可实现放大，但我要切换细节图的时候，他就一直在加载，显示不出来，非得手动刷新才能正常，像我这种情况是什么原因造成的呢？ :?: 求帮忙，谢谢先

    回复
  21. polly 说道：
    2012/07/18 23:08

    就是主图和细节图可正常切换，但鼠标移上去就是不能放大，没反应，点击的话就一直在加载。。。

    回复
  22. polly 说道：
    2012/07/18 23:16

    我刚又试了下，发现点击页面进去，鼠标移到主图的时候是现实空白的，然后主图和细节图切换下后，只能放大主图，细节图都不能放大？不知是什么原因

    回复
    • E-zencart 说道：
      2012/07/19 00:51

      (更正)默认模板classic改名为你自己的模板名，（ps：压缩包中忘记将classic改为YOUR_TEMPLATE了）
      用默认模板测试成功，你先排除你自己模板的问题，图片大中小图齐全，测试

      回复
  23. polly 说道：
    2012/07/19 15:41

    你好，我刚刚试了下，默认模版也是正常的，我觉得不是模板的问题，好像是根目录inages那个文件夹下的问题，我想问我的产品图片要怎么放啊？或者命名有什么要求，我目前的命名是这样的：001.jpg, 001_1.jpg, 001_2.jpg

    回复
    • E-zencart 说道：
      2012/07/19 17:53

      默认模板是正常的，说明插件时没问题了，剩下就要从自己的网站上着原因了

      回复
  24. momo 说道：
    2012/08/04 16:41

    大神，我的安装上去了，但是在弹出的大图中，一直点击，点到最后一张的时候会跳转到主页去，不会留在当前的页面上 这个是什么原因呀？

    回复
    • E-zencart 说道：
      2012/08/06 02:36

      测试了，大图到最后一张，在点击右边的时候，是关闭弹出层的，没有跳转

      回复
  25. momomo 说道：
    2013/01/28 15:19

    后台开启lightbox和zoom ？ 这个是哪儿开启呀，我找不到

    回复
  26. paullee 说道：
    2013/07/16 10:38

    什么时候开发1.5版本的

    回复

发表评论

    • 
  • 插入代码

联系我 Contact Me

回到页首