ecshop如何在商品分类页显示商品小图片??
本人小白,在研究ecshop商品列表页时想实现在商品大图下面显示对应的小图,测试了半天都不能添加上去,求大神指教,如何将第一张图做成第二张图这样的效果,让商品图片下面显示...
本人小白,在研究ecshop商品列表页时想实现在商品大图下面显示对应的小图,测试了半天都不能添加上去,求大神指教,如何将第一张图做成第二张图这样的效果,让商品图片下面显示商品的小图??
展开
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}-->
简单的分类页面商品相册缩略图已经调出来了,有可能点击切换功能会有些不好使,就要大家自己动手好好调调了,建议所添加的部分另放在一个库文件里面
在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 广告
2023-12-06 广告
很高兴能回答您的问题。以下是一段针对“一对一消息组件”的描述,字数在200字左右:该组件支持用户之间的私密交流,让沟通更加直接和高效。通过它,您可以向特定对象发送消息,并实时查看消息状态,包括对方是否已读或未读。同时,该组件还支持富文本消息...
点击进入详情页
本回答由网易云信提供
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询