Question

ecshop如何在商品分类页显示商品小图片？？

本人小白，在研究ecshop商品列表页时想实现在商品大图下面显示对应的小图，测试了半天都不能添加上去，求大神指教，如何将第一张图做成第二张图这样的效果，让商品图片下面显示商品的小图？？





Answer 1

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

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