新增FancyZoom效果
就是圖片縮放效果，類似於之前的lightbox
FancyZoom是一種無須另外開啟頁面來載入圖片，而是用javascript來呈現Mac風格的效果
在Apple的官方網頁中也可以看見此效果
在原作者Cabel的網頁中可以下載安裝在自己的blog中，安裝步驟也都寫好囉
不過小弟資質駑鈍，摸索了一段時間才安裝成功，在此為自己作個紀錄
1.首先在FancyZoom的網站下載FancyZoom 1.1.zip
2.解壓縮之後會看到兩個資料夾images-global和js-global
(windows使用者會看到__MACOSX資料夾，請不用理他，這是Mac才會用到的隱藏檔就類似於win的Thumbs.db)
3.在打開資料夾js-global裡面的FancyZoom.js(在Mac中我是使用Smultron編譯軟體;win使用者可以使用Notepad開啟)
搜尋找到/images-global/zoom/字碼之後，在前面填入要放置的空間(學校、ISP附贈空間、google page...etc)
也就是要填入完整的路徑http://xxx.xxx.xxx/images-global/zoom/ 之類的
4.儲存之後在將這兩個資料夾上傳至自己的空間即可
另外就是要更改自己blog中的css
將下面兩串放在<head>和</head>之中
<script src="http://xxx.xxx.xxx/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="http://xxx.xxx.xxx/js-global/FancyZoomHTML.js" type="text/javascript"></script>
記得將xxx.xxx.xxx換成自己的空間位址
之後搜尋<body>將它改成<body onload="setupZoom()">
就大功告成了！
而圖片如果要有文字說明，就在圖片的html上加入
title="說明寫在這"
02/14更新
因為會和comment photo這個javascript相衝，所以我將此特效拿掉了
訂閱：
張貼留言 (Atom)
0 意見:
張貼留言