ZenCart无插件产品图集成lightbox效果

标签：lightbox，Zen Cart插件

zencart插件库里jqlightbox插件，必须安装css_javascript_loader，而且还要写入sql比较麻烦，而且传统的lightbox效果看的比较多了，有点审美厌倦了，这里我制作的一个无插件集成fancybox的lightbox效果

fancybox官方地址：http://fancybox.net

演示demo：http://download.ezencart.com/demo/fancybox/

效果图

1

2

使用方法

1、将文件夹YOUR_TEMPLATE改名为你自己的模板名

2、修改includes\templates\YOUR_TEMPLATE\common\html_header_ADD.php文件

<script type="text/javascript" src="includes/templates/YOUR_TEMPLATE/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="includes/templates/YOUR_TEMPLATE/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

将YOUR_TEMPLATE改名为你自己的模板名后，上传文件。

3、将includes\templates\YOUR_TEMPLATE\common\html_header_ADD.php中全部内容复制到html_header.php中即可

4、（可选）
要实现效果图中排列，将includes\templates\YOUR_TEMPLATE\templates\tpl_product_info_display_ADD.php全部内容复制到tpl_product_info_display.php中，并删除掉原
tpl_product_info_display.php中主图和细节图的代码。并添加css

.images {
    border: 1px solid #ECEAEA;
    border-radius: 10px 10px 10px 10px;
    display: inline-block;
    height: 350px;
    overflow: hidden;
    padding: 2px;
    width: 330px;
}
.images p {
    padding-top: 5px;
    text-align: center;
}
#productMainImage{
margin: 0 10px 0 0;
}
#productAdditionalImages img {
    border: 1px solid #E1E1E1;
    margin: 4px;
    padding: 3px;
}

下载

  无插件lightbox效果.rar (55.6 KB, 893 次)

声明: 本文由Ezencart原创,转载请保留链接:ZenCart无插件产品图集成lightbox效果

本文链接地址: http://www.ezencart.com/pages/384.html

相关日志：

• 2013/08/24 -- ZenCart验证码插件
• 2013/08/11 -- [付费插件开放源代码]ZenCart 支付国家/金额/数量/邮寄方式/IP/Email限制插件 Payment_Limit_Controler V1.0
• 2013/08/06 -- [付费模块开放源代码][8月6号更新]ZenCart订单导出Excel(含图片)Order Excel Export v1.5模块
• 2013/06/30 -- 用户自定义分页产品数目插件Set number of products displayed per page
• 2013/05/26 -- ZenCart属性全部列出展示插件/尺码表
• 2013/02/07 -- ZenCart纯CSS头部下拉菜单pure_css_mega_menu插件
• 2012/10/29 -- ZenCart Minimum Customer Account Information虚拟产品简化用户信息插件
• 2012/10/26 -- ZenCart EZpages增加meta信息插件
• 2012/10/11 -- ZenCart 1.5版Easy Populate CSV批量上传插件安装及bug修正
• 2012/09/10 -- [付费工具][9月10号更新]ZenCart产品页meta信息自动生成工具meta2products_v1.5

1. shorgan 说道：

   2011/10/03 11:55

   读取不了第一张原图 其它小图都可以读取
   提示The requested content cannot be loaded.
   Please try again later.

   回复
   • E-zencart 说道：

     2011/10/03 18:00

     这个应该是服务器加载问题，不是程序的问题。我测试都是通过的。

     回复
2. shorgan 说道：

   2011/10/03 18:02

   愣是第一张图 读取不了 其它子图片都可以

   郁闷坏了 本地测试和服务器上都测试过了

   唉~~~！！！

   回复
   • E-zencart 说道：

     2011/10/04 10:04

     我都是测试通过了，发出来的，这个只是简单的集成fancybox效果的，你也可以自己根据fancybox代码集成到zencart上，
     第一张图，检查下没装之前是否存在，装后先不加载js看看，在检查tpl_modules_main_product_image.php看看

     回复
     • shorgan 说道：

       2011/10/04 12:18

       我看了一下是图片路径的问题，主图的路径被某个东西改变了
       所以他显示不了 主图实际存放位置/images/wahaha/1.jpg
       主图显示被强制成这个 /images/large/wahaha/1.jpg
       多了一个large,难道非要放一张主图到large里面去啊
       真悲催 我按你的方法试试 看问题在哪里

       回复
3. shorgan 说道：

   2011/10/03 18:09

   对了 怎么没有切换功能？子图与大图切换，怎么实现，用这个的话。

   回复
   • E-zencart 说道：

     2011/10/04 09:57

     这个没有子图大图切换，点击图片放大就可以了，其他功能个人感觉有些不实用。

     回复
4. shorgan 说道：

   2011/10/06 20:30

   程序有问题 tpl_modules_main_product_image.php
   改了之后就OK了
   不过就是打开网页有点卡 应该是掉用这个插件引起的

   回复
   • jasper 说道：

     2011/10/26 05:06

     請問shorgan, 你是怎麼修改路徑呢?因為我也有用一個問題.謝謝

     回复
     • E-zencart 说道：

       2011/10/26 09:22

       因为我做的网站都会是大图放在large文件夹中，所以tpl_modules_main_product_image.php针对自己的网站做了点改动，你想完整的话，可以将输出语句改为：
       < ?php
       echo '< a href="' . zen_href_link(FILENAME_POPUP_IMAGE, 'pID=' . $_GET['products_id']) . '" rel="group" title="'.$products_name.'" rel="nofollow">‘ . zen_image($products_image_medium, $products_name, MEDIUM_IMAGE_WIDTH, MEDIUM_IMAGE_HEIGHT) . ‘‘;
       ?>
       a前面空格去掉

       回复
5. jasper 说道：

   2011/10/26 18:30

   板大,我把 你這一段代替了原因的, 但主圖位置卻出現這一段語法
   而且a前面空格去掉 這意思是什麼,不太了解, 請指教,謝謝.

   回复
   • jasper 说道：

     2011/10/26 18:30

     原因=原本

     回复
   • E-zencart 说道：

     2011/10/27 09:24

     < a href=中< 和a之间的空格，直接写a标签的话，被博客给自动屏蔽掉了

     回复
6. zencart 说道：

   2011/10/31 14:32

   为什么 我本地按照 你说的 安装 点击图片的时候却是在本页面打开，就一张图在那里，是不是还要加载js文件之类的， 我 下载下来的 文件 里面 没有js，帮我看下 谢谢。

   回复
   • E-zencart 说道：

     2011/10/31 17:58

     压缩包里有js文件，看你js加载没有，你第二步，第三步完成没有

     回复
7. adz 说道：

   2011/11/07 15:41

   版大这个CSS用在那个页多图还更好看。

   回复
8. zenc 说道：

   2011/11/09 19:19

   LZ,完全是按照上面操作的，为什么只能调出来主图，addtional image调不出来~~
   只不过产品页面，以前还用了thickbox.，是不是冲突了？？

   $(document).ready(function() {
   $(“a[rel=group]“).fancybox({
   ‘transitionIn’ : ‘none’,
   ‘transitionOut’ : ‘none’,
   ‘titlePosition’ : ‘over’,
   ‘titleFormat’ : function(title, currentArray, currentIndex, currentOpts) {
   return ‘Image ‘ + (currentIndex + 1) + ‘ / ‘ + currentArray.length + (title.length ? ‘   ‘ + title : ”) + ”;
   }
   });
   });

   function product_info_image_change(o){
   if($(‘input[name=color_' + o.value + ']‘).val() != undefined){
   $(‘#productMainImage’).text(”).addClass(‘loading’);
   var img = new Image();
   $(img).load(function () {
   $(this).hide();
   $(‘#productMainImage’).removeClass(‘loading’).html(this);
   $(this).fadeIn();
   }).error(function () {
   }).attr(‘src’, $(‘input[name=color_' + o.value + ']‘).val());
   }
   }

   回复
   • E-zencart 说道：

     2011/11/10 09:39

     你可以去掉在看看，这个应该没那么复杂，只是简单的集成了fancybox

     回复
9. shorgan 说道：

   2012/04/01 22:42

   我用了你的语句，子图片是四张，但是显示的时候时是七张。我看了一下
   是主图多显示了三张。奇怪。你们有没有碰到过这个问题

   回复
   • shorgan 说道：

     2012/04/01 23:05

     嘿嘿 弄好了

     回复
     • kevin 说道：

       2012/04/11 12:08

       我的也是多几张图，你是怎么改的呀，我怎么改了好几遍都没成功，而且点主图的时候弹到其它页面了！

       回复
10. flanin 说道：

    2012/05/01 09:59

    楼主你好，首先非常感谢你的这个插件，我已经成功安装了这个插件，但是运行中有我发现个问题，就是评论页面的产品图上会出现一些源码。不知道你发现了没？

    回复
    • E-zencart 说道：

      2012/05/03 12:43

      贴图看看

      回复
11. yahoogoogle 说道：

    2012/07/15 20:51

    我的FTP里 一直未找到 这个文件html_header_ADD.php 。这是为什么？

    回复
    • E-zencart 说道：

      2012/07/16 13:36

      压缩包里是有这个文件的

      回复
12. zz 说道：

    2015/02/02 08:32

    我装了以后 主图缩小，没有jqlightbox放大的效果，下面也没有细节图很奇怪，还有css添加在哪个css文件里？

    回复

姓名 (必填)

电子邮件 (不会被公开) (必填)

站点





提交(Ctrl+Enter) 重置 取消回复 插入代码

有人回复时邮件通知我