Kuroshio Ocean Design - 黑潮設計 - Powered by Discuz! Board

標題: [ ECSHOP ] 商品展示頁面鼠標滑過小圖顯示大圖 [打印本頁]

作者: kayin 時間: 2012-1-19 05:39 PM 標題: [ ECSHOP ] 商品展示頁面鼠標滑過小圖顯示大圖

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

把


<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>


(其它模板代碼可能有點小差別)
改為


<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>


(把相冊圖片由原來顯示縮略圖改為顯示大圖片)

歡迎光臨 Kuroshio Ocean Design - 黑潮設計 (http://forum.kod.tw/)