您现在的位置是:主页 > 企业/商城之二开 > ecshop >

商品图片仿大步骤

刘清2020-01-24 14:06个人博客人已围观

简介1、下载jqzoom2.3 https://github.com/mindprojects/jqzoom 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

1、下载jqzoom2.3     https://github.com/mindprojects/jqzoom

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>



注意

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

 

Tags:

很赞额!(74)

上一篇:ecshop商品价格波动

下一篇:没有了

文章评论

站点信息

  • 建站时间:2018-12-1
  • 网站程序:织梦cms
  • 主题模板《今夕何夕》
  • 文章统计:299条
  • 文章评论:490条
  • 统计数据百度统计