您现在的位置是:首页 > 教程 > ecshop商城教程ecshop商城教程
ecshop商品相册鼠标移动滑过小缩略图显示大商品图片
郭俊立2024-03-30 00:02:05ecshop商城教程已有人查阅
导读部分人ECSHOP模板商品页面商品相册缩略图小图要靠点击才会显示商品大图先打开goods.dwt在
之间。然后找到代码:
部分人ECSHOP模板商品页面商品相册缩略图小图要靠点击才会显示商品大图先打开goods.dwt
添加代码:
然后找到代码:
<img src="/a/2406248/{$goods.goods_img}" rel="nofollow"/>在”{$goods.goods_name|escape:html}”代码的后面加上:
name="goods_img"
最后打开goods_gallery.lbi
找到代码:
经过上面的测试,鼠标滑过小图,在上面的图片显示位置显示的还是小图,原因在于:onmouseOver=”change_img(this.src)”,这段代码的意思是在上面的图片显示区显示当前的图片地址,this.src,而当前的图片地址正好是小图,解决方法:
将上面提到的:
添加代码:
<script type="text/javascript">
function change_img(img_src)
{
document.getElementsByName(“goods_img”)[0].src="/a/2406248/img_src;}
</script>
在<head></head>之间。然后找到代码:
<img src="/a/2406248/{$goods.goods_img}" rel="nofollow"/>在”{$goods.goods_name|escape:html}”代码的后面加上:
name="goods_img"
最后打开goods_gallery.lbi
找到代码:
<!- {foreach from=$pictures item=picture}->
<li><a href="/a/2406248/gallery.php?id={$id}&img={$picture.img_id}" target="_blank" rel="nofollow"></li>
<!-{/foreach}->
在class="B_blue"后面加上:
onmouseOver="change_img(this.src)" />
保存,运行即可。经过上面的测试,鼠标滑过小图,在上面的图片显示位置显示的还是小图,原因在于:onmouseOver=”change_img(this.src)”,这段代码的意思是在上面的图片显示区显示当前的图片地址,this.src,而当前的图片地址正好是小图,解决方法:
将上面提到的:
<img src="/a/2406248/{if" rel="nofollow"/>
修改为:
<img src="/a/2406248/{$picture.img_url}" rel="nofollow"/>
OK!
本文标签:
很赞哦! ()
相关文章
- ecshop商品列表页面和商品页面自定义url网址前缀的实现方法
- ecshop商品页显示商品收藏数量怎么修改
- ecshop商品批发多属性多规格多库存怎么批量购买
- ecshop水印ecshop商品添加水印的实现方法
- ecshop商品价格将属性价格改为直接价非加价修改的方法
- ecshop商品页商品详细描述内容调用商品相册图片代码的方法
- ecshop商品图片模糊修改图片上传压缩质量的方法
- ecshop商品相册显示顺序为正序的修改方法
- ecshop商品售完商品库存为0显示商品售完已售罄的实现方法
- ecshop商品详情页相关属性商品由新到旧排序的方法
- ecshop商品页商品浏览次数怎样修改按倍数增加
- ecshop商品页面定制属性附件上传文件上传图片
随机图文
-
ecshop后台订单批量删除方法
ecshop删除订单时首先要将订单设置成无效或者是取消,然后才能删除,但是如果要快速删除所有的订单应该如何做呢? -
ecshop商城首页显示积分商品调用积分商品的代码示例
ECSHOP商城首页显示积分商品,如何在首页调用积分商品ecshop开发教程,希望对大家有些帮助! -
ecshop商品删除后同时自动删除商品描述图的方法
ECSHOP商城默认删除商品时候不会同时删除商品描述里面图片,如果日积月累,这些没有用商品描述图片会占用服务器和空间大量容量,增加我们空间成本 -
ecshop5.3/5.4环境lib_base.php on line 346解决方法
然后删除工程目录下的temp文件夹,重新拷贝一份原始的temp文件夹进来,再访问首页,就会发现一切正常了!lib_base.php on line 346解决方法这个错误的的处理是修改文件:
留言与评论 (共有 条评论) |