還蠻特別的效果,雖然已經紅一陣子了
不知道台灣這有沒有人喜歡用

使用方式，下載來，看一下裡面的範例就明白了，簡單

程式下載：http://www.magictoolbox.com/static/magiczoomtrial.zip
官方無浮水印JS http://www.magictoolbox.com/static/mz-packed.js
官方預覽 http://www.magictoolbox.com/magiczoom/


安裝方法很簡單
1,下載第一個zip包 http://www.magictoolbox.com/static/magiczoomtrial.zip 解開，裡面有個MagicZoom.css，把這個內容複製到ecshop的style.css。

2，下載無浮水印js http://www.magictoolbox.com/static/mz-packed.js 在goods.dwt中載入。

3，找到goods.dwt中商品圖片的位置，比如bluesky中是

複製內容到剪貼板

代碼:

<a href="{$pictures.0.img_url}" rel="lightbox[example]"><img src="{$goods.goods_img}" alt="" class="thumb"  /></a>

把這句修改為

複製內容到剪貼板

代碼:

<a href="{$pictures.0.img_url}" title="{$goods.goods_name|escape:html}" class="MagicZoom" rel="zoom-width: 400px; zoom-position: bottom"><img src="{$goods.goods_img}"/></a>

應該就可以了，沒測試。


在樣式表裡面加

複製內容到剪貼板

代碼:

.MagicZoomPup {
    width:50px!important;
    height:50px!important;
}

浮動框高寬自己改上面大小。

原文

不好意思，因為是新手..在ecshop資料夾下找不到您說的「內容複製到ecshop的style.css」？請問是自己使用的布景資料夾下的「style.css」嗎？我也只有在這找到這檔案︿︿！
這幾天很努力的爬文學習中，我的購物網如下
candy shop
歡迎指教 是新手還請多幫忙解困..謝謝各位！

引用:

原文由 kueili 於 2008-7-8 16:00 發表
不好意思，因為是新手..在ecshop資料夾下找不到您說的「內容複製到ecshop的style.css」？請問是自己使用的布景資料夾下的「style.css」嗎？我也只有在這找到這檔案︿︿！
這幾天很努力的爬文學習中，我的購物網如下
candy shop
歡 ...

很CANDY的感覺
STYLE.CSS通常會在您下載的版型資料夾內
抱歉沒寫清楚,請多包涵

題外話http://www.kueili-ting.com/下最好建立INDEX.HTM不然整個被看光光摟

『抱歉沒寫清楚,請多包涵』...您這樣說我反而更不好意思呢
謝謝您熱心的回答，真的！因為一切剛摸索..我差不多都潛水在怒力爬文中 ..
但..對於您『題外話http://www.kueili-ting.com/下最好建立INDEX.HTM不然整個被看光光摟』...恩..資質愚笨..
不知道我該怎麼去做？
再度打擾您了！謝謝

引用:

原文由 kueili 於 2008-7-8 16:57 發表
『抱歉沒寫清楚,請多包涵』...您這樣說我反而更不好意思呢
謝謝您熱心的回答，真的！因為一切剛摸索..我差不多都潛水在怒力爬文中 ..
但..對於您『題外話http://www.kueili-ting.com/下最好建立INDEX.HTM不 ...

隨便上傳一個index.htm空白也沒關係
放上去就ok了
多少會好看些^^"

哦～我懂這差異在哪了 謝謝您呀！
我依您說的方式就放一個空白頁面就好。從不知道還有這招呢..非常感謝您的指導
還有這特效我也給放上了 因為不太懂語法，喬了好久才知道放大的視窗改如何在頁面中右邊呈現
呼！...
參考您的方式，我稍微改了一下作法，我將下載解壓縮的這「magiczoomtrial」檔案下的『MagicZoom.css』直接放進布景資料夾內，然後在『goods.dwt』檔上以

複製內容到剪貼板

代碼:

<link href="MagicZoom.css" rel="stylesheet" type="text/css" />

方式放上css裡的語法，接著就照您的方式做..不同的地方在這裡，結果這樣也行咧..
弄完這個特效後，我還是繼續爬文..因為還沒有將這裡的整個討論都看完..
我會繼續加油的！最後，還是非常感謝您的指導

您好：
就在我剛剛弄好這特效後，之後接著新增進去的商品圖檔顯示上來說就有問題囉︿︿！
不知您那裡是否也會如此？
晚上我新增10元系列的商品，點圖進去後..將滑鼠移到主圖檔上方卻呈現的是另一張圖的放大圖＝ ＝
也不清楚怎麼會這樣？但..先前那些商品呈現得很正常啊..？？怪怪嚕..
請問有解嗎？

感謝分享這個好功能，最棒的是這個移動速度很流暢！！

但有個問題，我不知道做錯哪個步驟，那個移動的小框框怎跑不出來...

[ 本文最後由 labman 於 2008-7-9 15:52 編輯 ]

Sorry~我知道原因了（測試後發現）
發現，如果我新增商品時在「一般資料」先上傳第一張照片後，接著的第二章圖檔就不要在這裡上傳，跳到「商品相冊」這裡去貼第二、三、四張圖檔這樣就不會產生上述的那放大的錯誤圖顯示。
奇怪，這一般資料的上傳圖檔和商品相冊這..有什麼不同之處？會導致這樣的現象＠＠..

是一開始我放置圖檔的方式是比較不正確嗎？

引用:

原文由 labman 於 2008-7-8 18:45 發表
感謝分享這個好功能，最棒的是這個移動速度很流暢！！

但有個問題，我不知道做錯哪個步驟，那個移動的小框框怎跑不出來...
http://yihua.mooo.com/shop/goods-2.html ...

檢查一下css這步驟是否有做好？

『  MagicZoomPup {
    width:50px!important;
    height:50px!important;
}  』

這是加到布景資料夾的STYLE.CSS裡面，試看看吧！

引用:

原文由 kueili 於 2008-7-9 08:56 發表
檢查一下css這步驟是否有做好？

確實疏忽路徑擺錯了... 感謝您的回應！

引用:

原文由 kueili 於 2008-7-9 08:53 發表
Sorry~我知道原因了（測試後發現）
發現，如果我新增商品時在「一般資料」先上傳第一張照片後，接著的第二章圖檔就不要在這裡上傳，跳到「商品相冊」這裡去貼第二、三、四張圖檔這樣就不會產生上述的那放大的錯誤圖顯示。
奇怪 ...

我也遇上這問題了... 但是用您的方法，還是一樣...

演示

[ 本文最後由 labman 於 2008-8-1 02:59 編輯 ]

3，找到goods.dwt中商品圖片的位置，比如bluesky中是
複製內容到剪貼板代碼:
<a href="{$pictures.0.img_url}" rel="lightbox[example]"><img src="{$goods.goods_img}" alt="" class="thumb"  /></a>


我是JOYO的版型

找不到這一段

請問關鍵字那哪些?

感謝喔!!

引用:

原文由 kueili 於 2008-7-8 20:05 發表
哦～我懂這差異在哪了 謝謝您呀！
我依您說的方式就放一個空白頁面就好。從不知道還有這招呢..非常感謝您的指導
還有這特效我也給放上了 因為不太懂語法，喬了好久才知道放大的視窗改如何在頁面中右邊呈現
...

本人是新手﹐沒有很多的知識﹐我曾嘗試依照你的意思來做﹐但結果失敗了﹐大兄﹐可否詳細說明步驟﹐及『布景資料夾』是指在那裡的位置？


[ 本文最後由 battery-hk 於 2008-7-25 17:23 編輯 ]

不好意思，我曾經弄筆記記錄下來＠＠..點下方連結進來看看吧！
http://163.26.52.242/~kueili97/m ... 3/page.php?tbdsn=28
希望對您有幫助。

引用:

原文由 kueili 於 2008-7-25 19:37 發表
不好意思，我曾經弄筆記記錄下來＠＠..點下方連結進來看看吧！
http://163.26.52.242/~kueili97/m ... 3/page.php?tbdsn=28
希望對您有幫助。

好多謝你的筆記提供﹐我用的模板係 數碼商城 digit ﹐我也嘗試過同樣是失敗了﹐可能係我的資質差﹐看得不明白﹐真不好意思﹐白費你的心機﹐怎樣都好多謝你這有心人。

想請問 .MagicZoomPup {
    width:50px!important;
    height:50px!important;
}

這一塊 要加在  style.css
那一個地方才是正確的  

我加到最下面  整個購物台 全左移 都是中文字呢

快昏了 麻煩啦

顯示如下
查看購物車
用戶中心
選購中心
團購商品
優惠活動
  
首頁
印表耗材館
服飾館
生活館
3C館
注意事項
流行包包館
限量~特價促銷區
性感睡衣館

全部變成中文字 靠在左邊了  @@

[ 本文最後由 photoegg 於 2008-9-3 13:08 編輯 ]