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

本人小白,在研究ecshop商品列表页时想实现在商品大图下面显示对应的小图,测试了半天都不能添加上去,求大神指教,如何将第一张图做成第二张图这样的效果,让商品图片下面显示... 本人小白,在研究ecshop商品列表页时想实现在商品大图下面显示对应的小图,测试了半天都不能添加上去,求大神指教,如何将第一张图做成第二张图这样的效果,让商品图片下面显示商品的小图?? 展开
 我来答
ecshop开发中心
2015-08-04 · TA获得超过577个赞
知道大有可为答主
回答量:2299
采纳率:0%
帮助的人:572万
展开全部
在做天猫模板的时候列表页面需要调用商品相册缩略图,找了很多方法才到这简单实用的调用方法,现在由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}-->

简单的分类页面商品相册缩略图已经调出来了,有可能点击切换功能会有些不好使,就要大家自己动手好好调调了,建议所添加的部分另放在一个库文件里面
网易云信
2023-12-06 广告
很高兴能回答您的问题。以下是一段针对“一对一消息组件”的描述,字数在200字左右:该组件支持用户之间的私密交流,让沟通更加直接和高效。通过它,您可以向特定对象发送消息,并实时查看消息状态,包括对方是否已读或未读。同时,该组件还支持富文本消息... 点击进入详情页
本回答由网易云信提供
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式