ecshop相冊實現鼠標滑過小圖切換大圖功能

關於如何使ecshop商品頁,商品相冊鼠標滑過小圖顯示大圖的功能實現如下:

先打開goods.dwt 

添加代碼: 
<script type="text/javascript">
function change_img(img_src)
{
document.getElementsByName("goods_img")[0].src=img_src;
}
</script>
在<head></head>之間。


然後找到代碼: 
<img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" > 
在"{$goods.goods_name|escape:html}"代碼的後面加上:
name="goods_img" width="360" height="360"/>

最後打開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}-->

在class="B_blue"後面加上:
 onmouseOver="change_img(this.src)" />


這樣就實現了商品相冊鼠標滑過小圖顯示大圖的功能,但此時,鼠標滑過小圖時,大圖可能會是模糊的,這是因爲圖片路徑src="{if $picture.thumb_url}{$picture.thumb_url} 中顯示圖片的值是thumb_url,這個值是縮略圖,此時只需將thumb_url改爲goods_img即可。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章