Ecshop模板开发（五）：商品详情页图片相册jqzoom放大

来源：互联网发布：淘宝艾灸盒哪个牌子好编辑：程序博客网时间：2024/05/17 05:10

1、下载jqzoom2.3 （http://download.csdn.net/download/sinat_37390744/9802308）
2、引入js和css文件

<link rel="stylesheet" href="themes/mydiy/css/jqzoom.css" type="text/css">    {insert_scripts files='jquery-1.6.js,jquery.jqzoom-core-pack.js'}

3、goods.dwt代码

<style>        ul#thumblist{display:block;}        ul#thumblist li{float:left;margin-right:2px;list-style:none;}        ul#thumblist li a{display:block;border:1px solid #CCC;}        ul#thumblist li a.zoomThumbActive{            border:1px solid red;        }        ul#thumblist li a img{            width: 60px;            height: 60px;        }        .jqzoom{            text-decoration:none;            float:left;        }    </style>{if $pictures}            <div class="clearfix">                <a href="{$goods.goods_img}" class="jqzoom" rel='gal1'  title="{$goods.goods_name}" >                    <img src="{$goods.goods_img}"  title="{$goods.goods_name}"  style="border: 4px solid #666;">                </a>            </div>        {/if}            <br/>        {include file="./library/goods_gallery.lbi" /}        <script type="text/javascript">    $(document).ready(function() {        $('.jqzoom').jqzoom({            zoomType: 'standard',            lens:true,            preloadImages: false,            alwaysOn:false        });    });</script>

3、goods_gallery.lbi代码

<div class="clearfix" >    {if $pictures}    <ul id="thumblist" class="clearfix" >        {foreach from=$pictures item=pic}        <li><a title="{$pic.img_desc}" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: '{$pic.thumb_url}',largeimage: '{$pic.img_url}'}"><img src='{$pic.thumb_url}'></a></li>        {/foreach}    </ul>    {/if}</div>

4、上传商品相册图片

后台管理--商品管理--商品列表--编辑--商品相册--上传

5、字段说明

value里面的thumb_url表示缩略图（小图）value里面的img_url表示缩略图（大图/原图）value里面的img_desc表示图片的描述

6、注意

可能会出现jqzoom调用失败的现象。这是因为transport.js文件和jquery代码有冲突，解决方法见http://blog.csdn.net/sinat_37390744/article/details/68953524

0 0