版型修改：滑動圖片

這是應朋友要求的，滑鼠移過相冊圖片時，主商品圖片就會更換的特效。
主要可以應用在像是服裝的正反側面顯示，這樣就不需要讓客戶還要到商品相冊裡去翻看了。

這東西在twe的話，收費是$3000...XD

第一步：

首先請打開您的ftp軟體，
連上您的ecshop，然後下載
/themes/版型名稱/goods.dwt

打開goods.dwt，並且找到(第14行)：

{insert_scripts files='common.js'}

在後面加入（嗯，我直接用Dreamweaver產生的程式碼）：

{literal}
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> {/literal}

第二步

接著往下找到：

<!-- 商品圖片 -->
<a href="javascript:;" onclick="window.open('gallery.php?id={$goods.goods_id}'); return false;"><img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" border="0"/></a>

改成：

<!-- 商品圖片 -->
<a href="javascript:;" onclick="window.open('gallery.php?id={$goods.goods_id}'); return false;"><img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" border="0" id="goodpicture" name="goodpicture"/> </a>

（實際上就是在img標籤裡多加了 id="goodpicture" name="goodpicture" 而已。）

然後存檔，上傳goods.dwt。

第三步：

接著打開 /themes/版型名稱/library/goods_gallery.lbi （可以從管理中心，也可以自己下載回來修改），
找到（第八行）：

<A href="gallery.php?id={$id}&img={$picture.img_id}" target="_blank">

改成：

<A href="gallery.php?id={$id}&amp;img={$picture.img_id}" target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('goodpicture','','{$picture.img_url}',1)">

最後存檔上傳即可。

這樣就大功告成~

ECSHOP台灣社群

使用者登入

線上使用者

導覽

最新回應

第一步：

第二步

第三步：

延伸閱讀

相關的文章