[BLOG] Lightbox for Blogger

前兩天發現這個 利用 Lightbox 顯示圖片的小功能，覺得還蠻有趣的；特別花了點時間來試試看。
先來看一下 Lightbox 的效果

單張圖片模式：

點我或點選上方圖片檢視 Lightbox 效果

圖片集模式 （將游標移到圖片左/右上方可點選"NEXT"或"PREV"切換上下張圖片）：
　
點我或點選上方圖片檢視 Lightbox 效果

有沒有很炫啊～嘿嘿！（有啦～一定要有啦～不然我戲會演不下去 (￣▽￣")>）

使用方法還蠻簡單的：

Step1. 下載 Lightbox JS v2.0
解壓縮後將 "css"、"js" 與 "images" 等三個資料夾複製到個人網站的根目錄，也可以放在 Google Page 上，不過 Google Page 無法上傳整個資料夾，所以請將所有檔案一一上傳，另外記得要先修正 lightbox.css 以及 lightbox.js 中圖片的路徑再上傳至 Google Page

（e.g.: "images/loading.gif" 改成 "http://pizip0719.googlepages.com/loading.gif"）

Step 2. 在 Template 引用相關 js & css 檔
打開您的 Template，在 <\head> 之前加入以下程式碼

<script type="text/javascript" src="http://pizip0719.googlepages.com/prototype.js"></script>
<script type="text/javascript" src="http://pizip0719.googlepages.com/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://pizip0719.googlepages.com/lightbox.js"></script>
<link rel="stylesheet" href="http://pizip0719.googlepages.com/lightbox.css" type="text/css" media="screen"/>


Step 3. 修改圖片連結
在你想要套用 Lightbox 效果的圖片連結上加入 rel="lightbox"，並將 href 指向欲顯示的大圖
請參考以下範例

<a title="欲顯示的圖片描述" href="大圖的URL" rel="lightbox" ><img src="小圖的URL" /></a>


若是要產生圖片集的效果，只要將所有圖片中的 rel="lightbox" 改為 rel="lightbox[set1]" 就可以了（set1為圖片集名稱，可自訂）

Step 4. 大功告成！

很簡單吧～
需要注意的一點是，以上所有程式範例中有出現 "http://pizip0719.googlepages.com" 的地方請記得將它置換成您自己的 Google Page URL 或是您存放 js、css 檔及圖片的網路位址。
若是沒有改的話也會有效果，不過這樣等於是引用到我的 js 檔，若是哪一天我的檔案損毀或是 Google 掛掉，您的 Lightbox 效果也會跟著失效囉～

有興趣的朋友們自己試試看吧！╭(￣▽￣)╯

實用程度：★★★☆☆

困難程度：★☆☆☆☆

爽　　度：★★★☆☆