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

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

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

2011-08-12 11:43 144926 26 发表评论
标签:


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;
}

下载

相关日志:

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

  1. shorgan 说道:

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

    • E-zencart 说道:

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

  2. shorgan 说道:

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

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

    唉~~~!!!

    • E-zencart 说道:

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

      • shorgan 说道:

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

  3. shorgan 说道:

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

    • E-zencart 说道:

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

  4. shorgan 说道:

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

    • jasper 说道:

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

      • E-zencart 说道:

        因为我做的网站都会是大图放在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 说道:

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

  6. zencart 说道:

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

    • E-zencart 说道:

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

  7. adz 说道:

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

  8. zenc 说道:

    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 说道:

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

  9. shorgan 说道:

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

    • shorgan 说道:

      :wink: 嘿嘿 弄好了

      • kevin 说道:

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

  10. flanin 说道:

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

  11. yahoogoogle 说道:

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

  12. zz 说道:

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

发表评论

  • 
  • 插入代码

联系我 Contact Me

回到页首