新聞中心
Ecshop怎么才能實(shí)現(xiàn)鼠標(biāo)滑過（不用雙擊）圖片自動(dòng)切換為大圖
作者 / 無憂主機(jī) 時(shí)間 2014-09-04 18:39:56
經(jīng)常網(wǎng)購的朋友們都知道淘寶上面的寶貝都是有原圖和縮略圖的，并且都是從各個(gè)角度去拍攝的，當(dāng)鼠標(biāo)滑過原圖的時(shí)候就會(huì)出現(xiàn)三個(gè)比原圖還要大的寶貝圖像，不經(jīng)意的一看還以為是用放大鏡放大一樣，可以清楚的看到寶貝的詳細(xì)圖像，這樣也方便需要購買的客戶去驗(yàn)證商品的質(zhì)量，小編的一位站長朋友是使用開源程序Ecshop搭建的仿淘寶商城，由于很多圖片都是放上去了，但是看上去不是很形象，當(dāng)客戶想看看大圖的時(shí)候都看不到，這樣對(duì)客戶的體驗(yàn)度很是不友好，為了實(shí)現(xiàn)這個(gè)功能，于是就找到了無憂主機(jī)小編我。經(jīng)過小編查看了淘寶的那個(gè)鼠標(biāo)滑過就可以從小圖切換為大圖的實(shí)現(xiàn)原理也找到了解決的思路，經(jīng)過半個(gè)小時(shí)果然實(shí)現(xiàn)了。小編在這里分享下解決方案。首先小編把這個(gè)截圖分享下如下：
[caption id="attachment_16407" align="alignnone" width="282"]
ecshop[/caption]
第一步：先找到目錄文件下的goods.dwt 使用編輯軟件打開。
在<head></head>之間。
添加以下代碼:
<script type="text/javascript">
function change_img(img_src)
{
document.getElementsByName("goods_img")[0].src=img_src;
}
</script>
第二步：找到以下代碼：
<img src="{$goods.goods_img}"alt="{$goods.goods_name|escape:html}" >
在"{$goods.goods_name|escape:html}"代碼的后面加上下面一行代碼：
name="goods_img" width="250" height="250"/>
第三步：找到文件使用編輯軟件打開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)" />以上三個(gè)步驟完全修改后，然后登陸下網(wǎng)站的后臺(tái)點(diǎn)擊下更新下緩存。更新完畢后就可以訪問網(wǎng)站的首頁了，點(diǎn)擊購買對(duì)應(yīng)的商品后然后鼠標(biāo)在上面滑過就可以清楚的看到大圖出現(xiàn)了。感謝各位站長對(duì)小編的支持，如果設(shè)置過過程中遇到問題的站長們也可以來咨詢小編哦。小編QQ：340555009 340555005 340555017 無憂主機(jī)相關(guān)文章推薦閱讀： ECSHOP如何賦予新注冊會(huì)員VIP等級(jí) ECSHOP商業(yè)版權(quán)POWERED BY ECSHOP 修改大全 ECSHOP去版權(quán)_刪除ECSHOP底部版權(quán)信息的方法
本文地址：http://www.gle-technology.com/ecshop/16405.html
