LSRONG-双荣设计
扫描二维码添加QQ好友

扫一扫二维码,加我QQ

ecshop分类列表页面每个商品调取商品相册缩略图方法

2016-03-27 11:03:24ecshop常见问题

在做天猫模板的时候列表页面需要调用商品相册缩略图,找了很多方法才到这简单实用的调用方法,现在由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}-->


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

文章关键词