Jinn's Tech Blog

Lightbox JS是由Lokesh Dhakae所開發(目前最新的版本是2.02版)，中文翻譯有人翻成「光箱特效」，姑且不論名字，它的作用其實就是當你在載入圖片時，能夠有遮罩的效果，也不需要另開頁面來呈現，效果方面也是蠻炫的，可以用來美化你的Blog，請按下面的圖片先來體驗一下它的效果。

若無法觀看，請至「官方網站體驗特效」

請先至「官方下載」或「按此下載」，解壓後在檔案內含有一個index.htm，說明在一般網頁上如何使用此特效，蠻淺顯易懂的，我就不多贅述；以下針對如何在網誌上使用做重點說明：

【準備工作】下載後需要修改的檔案有下面幾個地方：（紅色字部分是原來檔案就有的）--- 修改完後，把js、css、內定圖片放到網路上(範例圖片、index不用)，若不知道要放什麼，最簡單的方法就是把壓縮檔的檔案全部上傳到網路空間中。

1. lightbox.js：在此檔案中，可以找到「images/loading.gif」、「images/closelabel.gif」等關鍵字，loading.gif和closelabel.gif是原始軟體提供的圖檔，光箱效果本身會用到這幾個圖，所以你要和檔案一起上傳到網路空間中，接著你要把「images/loading.gif」、「images/closelabel.gif」替換成你目前圖片的所在位置，一般來說你會上傳到某個免費空間上，你就填入圖片的URL就行了，例如：「images/loading.gif」改成「http://ABC/loading.gif」，簡單的說，就是要讀取loading.gif的網路空間位址。
   接著有一個參數 var resizeSpeed，這是控制特效的速度，預設值是7，你可以自由調整(0~10)
2. lightbox.css：同上，將「../images/prevlabel.gif」、「../images/nextlabel.gif」替換成圖片的所在位置。
3. 請將下面語法「紅色」的部分，換成檔案上傳後的位址，然後將這四句語法放到「適合的地方」。這裡所謂「適合的地方」是因為每個網誌不同，你要放在可以套用到每篇文章的地方，不然可能會造成只有某篇文章可以套用特效，其他文章卻不行，以Yam為例，你可以放在 Blog管理頁面-->Blog基本設定-->「說明」欄位中。
   <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
   <script src="js/prototype.js" type="text/javascript"></script>
   <script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
   <script src="js/lightbox.js" type="text/javascript"></script>

【如何使用】圖片套用的語法如下所示(主要是rel="lightbox"的部分)：
<a href="大圖位置" rel="lightbox" title="設定標題"><img src="小圖位置" alt="提示文字" border="0"/></a>

【設定群組的方法】將連結上rel="lightbox"改成rel="lightbox[自定名稱]"，群組名稱要用中括號包起來。
範例：將三張圖片設定為「jinn」的群組
<a href="圖片1.jpg" rel="lightbox[jinn]">圖片 #1</a>
<a href="圖片2.jpg" rel="lightbox[jinn]">圖片 #2</a>
<a href="圖片3.jpg" rel="lightbox[jinn]">圖片 #3</a>

【懶人套用法】若你覺得太麻煩了，那我提供我上傳好的檔案給大家使用，但有一個風險，就是若我把檔案刪除了，你也會存取不到，請自行考量吧。

1. 不用下載或上傳任何檔案，上述的「準備工作第一、二步」，你可以省略不做。
2. 準備工作的第三步，改成下面語法：
   
   <link rel="stylesheet" href="http://tinyurl.com/oa3rt/lightbox.css" type="text/css" media="screen" /> <script src="http://tinyurl.com/oa3rt/prototype.js" type="text/javascript"></script> <script src="http://tinyurl.com/oa3rt/scriptaculous.js?load=effects" type="text/javascript"></script> <script src="http://tinyurl.com/oa3rt/lightbox.js" type="text/javascript"></script>
   
3. 使用的方法不變：單圖顯示或群組圖片的使用方法一樣。

圖片來源：Lightbox JS官方網站