所在位置:首页 > 学习心得 > ecshop鼠标经过相册小图大图切换功能
ecshop鼠标经过相册小图大图切换功能
  • ecshop鼠标经过相册小图大图切换功能
    发布时间:2010-06-30 类别:PHP技术 来源:侠客工作室
    • 1
    • 2
    • 3
    • 4
    • 5
  • ecshop鼠标经过相册小图大图切换功能

    以默认模板为例,

    第一步 用编辑器打开商品详情页模板文件-----goods.dwt 

    1.----在<head></head>之间加入如下代码 <script type="text/javascript">

    function change_img(img_src)

    {

    document.getElementsByName("goods_img")[0].src=img_src;

    }

    </script>
    2.----定位到 <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" >
    把它修改为
    <img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" name="goods_img" width="250" height="250"/>
    3.----保存

    第二步--用编辑器打开商品相册库文件-----goods_gallery.lbi


    <!-- {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}" class="B_blue" /></a>

    </li>

    <!--{/foreach}-->
    (其它模板代码可能有点小差别)
    改为
    <!-- {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}" class="B_blue" onmouseOver="change_img(this.src)" /></a>

    </li>

    <!--{/foreach}-->
    (把相册图片由原来显示缩略图改为显示大图片)

  • ☆☆☆技术交流群:5684178☆☆☆
  • 上一篇:如何屏蔽ecshop SQL提示 让注入无能为力!
  • 下一篇:php获取系统时间函数
侠客工作室主要承揽网站制作|企业建站|北京网站制作|北京网站建设|北京企业建站|专业仿站|SEO优化等业务
地址:北京市海定区清河水木天成 电话:13718388147 13718388147 传真:13718388147 访问统计:
投诉电话:13718388147 投诉QQ:点击这里给我发消息 客服信箱:1300105556@qq.com 邮编:102200 北京网站建设地图 北京网站建设RSS地图
版权所有 2009-2014侠客工作室【北京网站建设】 京ICP备11021494号-1