西部数码主机 | 阿里云主机| 虚拟主机 | 服务器 | 返回乐道官网
当前位置: 主页 > php教程 > ecshop教程 >

ecshop商品详情页图片更改为鼠标经过切换大图

时间:2016-10-05 06:33来源:未知 作者:好模板 点击:
把 ecshop 商品详情页进行美化修改一下,默认的 ecshop 商品详情页主图不能切换,想要看大图的话,需要进行再次点击,然后显示商品大图,对于用户的体验不太好,看来只好在当前页面

把 ecshop 商品详情页进行美化修改一下,默认的 ecshop 商品详情页主图不能切换,想要看大图的话,需要进行再次点击,然后显示商品大图,对于用户的体验不太好,看来只好在当前页面进行修改了,本来有两个方案,第一个就是点击大图的话就在当前页面放大商品图,第二个就是当鼠标经过的时候切换成大图,客户最终选定了第二个方案,当鼠标经过的时候切换成大图,好吧,夏日博客就按照这个来进行修改,方法也很简单。

第一步,打开 ecshop 商品详情页模板 goods.dwt 文件,在两个 head 之间添加如下的代码:

 
  1. <script type="text/javascript">function change_img(img_src){  document.getElementsByName("goods_img")[0].src=img_src;}</script>  

第二步,查找如下代码:

 
  1. <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" />  

修改为如下代码:

 
  1. <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" name="goods_img" width="250" height="250" />  

第三步,打开 /library/goods_galler.lbi 文件,查找如下的代码:

 
  1. <!-- {foreach from=$pictures item=picture}--><li><a href="gallery.php?id={$id}&img={$picture.img_id}" target="_blank"><img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}" alt="{$goods.goods_name}" /></a></li><!--{/foreach}-->  
  2.   
  3. //改为:  
  4.   
  5. <!-- {foreach from=$pictures item=picture}--><li><a href="gallery.php?id={$id}&img={$picture.img_id}" target="_blank"><img src="{if $picture.thumb_url}{$picture.img_url}{else}{$picture.img_url}{/if}" alt="{$goods.goods_name}" /></a></li><!--{/foreach}-->  

好了,一切OK,我们来对比一下第三步的这两段代码,实际上只是添加了 onmouseOver="change_img(this.src)" 这一句而已,简单吧。

(责任编辑:好模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容