最新公告
  • 欢迎您光临三优资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 在做天猫模板的时候列表页面需要调用商品相册缩略图,找了很多方法才到这简单实用的调用方法,现在由68ecshop技术来告诉你该怎么调用吧!

    在category.php里搜索代码

    if($display == ‘grid’)
    {
    if(count($goodslist) % 2 != 0)
    {
    $goodslist[] = array();
    }
    }

    在代码上方添加如下代码调出小相册缩略图

    //新增分类页商品相册
    if(is_array($goodslist)){
    foreach($goodslist as $key=>$vo){
    $goodslist[$key][‘pictures’] = get_goods_gallery($key);// 商品相册
    }
    }
    //新增分类页商品相册

    然后打开goods_list.lbi库文件,在商品循环
    <!–{foreach from=$goods_list item=goods name=name}–>
    <!–{if $goods.goods_id} –>

    里面,找到合适的位置添加如下代码

    <!– {if $goods.goods_id} –>

    <div class=”productThumb clearfix”>
    <a style=”visibility: visible; color:#fff; position:relative; z-index:99999999999;” href=”javascript:;” class=”ui-slide-arrow-s proThumb-prev” title=”上一页” >&lt;</a>
    <div style=”float:left; width:185px; overflow:hidden;” id=”goods_item{$smarty.foreach.goods_list.iteration}”>
    <div  class=”proThumb-wrap” style=”position:relative;” >

    <p class=”ks-switchable-content” style=”position:absolute; left:0px; width:300%;”>
    <!–{if $goods.pictures}–>
    <!– {foreach from=$goods.pictures item=picture name=picture}–>
    <b  data=”pic_{$goods.goods_id}”>
    <A href=”###” rev={$picture.img_url} rel=goodsPic ><img src=”{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}” alt=”{$goods.goods_name}” /></a>
    <i></i>
    </b>
    <!–{/foreach}–>
    <!–{/if}–>
    </p>

    </div>
    </div>
    <a  style=”visibility: visible; color:#fff;” href=”javascript:;” class=”ui-slide-arrow-s proThumb-next” title=”下一页”>&gt;</a>
    </div>

    <script>
    //相册底部控制
    function goods_gallery_control(){
    var num01=0;
    var gg_lis = $(‘.ks-switchable-content b’).length;
    $(‘.proThumb-next’).click(function(){

    gg_lis = $(this).siblings(‘#goods_item’).find(‘.ks-switchable-content b’).length;
    num01++;

    if(num01>(gg_lis-5)){
    num01=gg_lis-5;
    $(this).siblings(‘#goods_item’).find(‘.proThumb-wrap p’).css(‘left’,(gglis-num01)*35);

    }
    $(this).siblings(‘#goods_item’).find(‘.proThumb-wrap p’).animate({left:-num01*35},200);
    })
    $(‘.proThumb-prev’).click(function(){

    gg_lis = $(this).siblings(‘#goods_item’).find(‘.ks-switchable-content b’).length;
    num01–;
    if(num01<0){

    num01=0;
    $(this).siblings(‘#goods_item’).find(‘.proThumb-wrap p’).css(‘left’,(gglis-num01)*35);

    }
    $(this).siblings(‘#goods_item’).find(‘.proThumb-wrap p’).animate({left:-num01*35},200);
    })
    }
    goods_gallery_control();
    </script>

    <script type=”text/javascript”>
    $(function(){
    var pic_tab = $(‘.ks-switchable-content b’);
    pic_tab.click(function(){
    var pic_tab = $(this).attr(‘data’);
    var pic_img = $(‘.item_’ + pic_tab);
    var pic_goodsimg = $(this).find(‘img’).attr(‘src’);
    pic_img.attr(‘src’, pic_goodsimg);
    $(this).addClass(‘proThumb-img proThumb-selected’).siblings(‘.ks-switchable-content b’).removeClass(‘proThumb-img proThumb-selected’);
    })
    })
    </script>

    <div style=”display: none;” class=”productSize clearfix”></div>
    <!–{/if}–>

    简单的分类页面商品相册缩略图已经调出来了,有可能点击切换功能会有些不好使,就要大家自己动手好好调调了,建议所添加的部分另放在一个库文件里面

    1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3165260857@qq.com
    2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
    3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
    4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!


    三优资源网 » ecshop分类列表页面每个商品调取商品相册缩略图方法

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    三优资源网
    一个高级程序员模板开发平台

    发表评论

    发表评论

    • 91会员总数(位)
    • 720资源总数(个)
    • 7本周发布(个)
    • 0 今日发布(个)
    • 174稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情