官方微博: 腾讯  
首页 > ECSHOP教程 > ECSHOP模板教程 > ECSHOP商品详情页修改 > ECSHOP商品相册鼠标移动滑过小缩略图显示大商品图片

ECSHOP商品相册鼠标移动滑过小缩略图显示大商品图片

ECSHOP教程 / ecshop 教程网(www.ecshop119.com) 2013-11-11

部分人ECSHOP模板商品页面商品相册缩略图小图要靠点击才会显示商品大图

先打开goods.dwt

    添加代码:
    <script type="text/javascript">
    function change_img(img_src)
    {
    document.getElementsByName(“goods_img”)[0].src="http://archive.cnblogs.com/a/2406248/img_src;}
    </script>
    在<head></head>之间。

然后找到代码:

    <img src="http://archive.cnblogs.com/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="http://archive.cnblogs.com/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="http://archive.cnblogs.com/a/2406248/{if" rel="nofollow"/>

    修改为:<img src="http://archive.cnblogs.com/a/2406248/{$picture.img_url}" rel="nofollow"/>

OK!

转载请注明:ECshop119模板屋-ECshop教程网(全国最专业的ECSHOP插件制作商-专业ECSHOP二次开发)

帮助目录

在线反馈

可以将问题或建议反馈给我们。

提交在线反馈

与网友交流ECSHOP开发修改。

加入QQ群交流