網頁設計, 網頁資源

網頁套件-圖片滑入自動縮放預覽外掛MagicToolBox

梅干2010/06/24
梅問題-網頁設計套件-圖片滑動縮放預覽外掛MagicToolBox
  在梅干的教學網中,各位應該會發現到,當圖片太大時滑鼠只要滑入縮圖,右邊就會跑出原始尺寸的圖片影像, 而那是套用了jQuery的Zoom元件,但梅干最近發現國外有個網站,是專門在研發這類型的元件, 且效果還相當的多元,各種放大的效果應有盡有,且套用還相當的容易,對f於圖片預覽縮放感興趣的朋友,不坊也來看看囉!

MagicToolBox套件:
套件名稱:MagicToolBox
套件性質:付費
官方網站:http://www.magictoolbox.com/

Step1
進入官網後,下方就是所有縮放功能的列表與說明,只要點【Demo】鈕就可觀看特效的展示。
梅問題-網頁設計套件-圖片滑動縮放預覽外掛MagicToolBox

Step2
接著拉到下方,有一個Examples下方有一個examples of Magic Zoom Plus連結,點一下可看到完整的展示內容。
梅問題-網頁設計套件-圖片滑動縮放預覽外掛MagicToolBox

Step3
每一個範例都可玩玩看,只要滑鼠滑入就會不同的縮放效果。
梅問題-網頁設計套件-圖片滑動縮放預覽外掛MagicToolBox

Step4
若喜歡此效果,對著右邊的【Download】鈕點一下,就可下載試用。
梅問題-網頁設計套件-圖片滑動縮放預覽外掛MagicToolBox

Step5
下載完畢後,解壓縮並對著index.html雙響。
梅問題-網頁設計套件-圖片滑動縮放預覽外掛MagicToolBox
Step6
這時就可開啟展示頁,相當的貼心,左邊的Examples就是特效的清單,右上是展示的效果,下方是該範例的原始碼。
梅問題-網頁設計套件-圖片滑動縮放預覽外掛MagicToolBox

Step7
當要套用時,分別將magiczoomplusimages資料夾拷貝出來。
梅問題-網頁設計套件-圖片滑動縮放預覽外掛MagicToolBox
Step8
接下來將剛的特效的原始碼拷貝出來,並且只要修改圖片的路徑與名稱。
梅問題-網頁設計套件-圖片滑動縮放預覽外掛MagicToolBox

Step9
儲存完就可使用了,但若是試用版的話,圖下方會出現Please upgrade to full..等文字,若覺得礙眼的話,就得花錢買囉!但該元件的授權方式是用站台來算,若要給愈多站台用費用就愈高,不在意的話就加減用吧!必竟還不會太干擾畫面
梅問題-網頁設計套件-圖片滑動縮放預覽外掛MagicToolBox

[範例預覽]
UAG軍規iPhone防摔殼