[更新] Lightbox JS v2.05 § 光箱特效使用教學(Blogger)

魏子靖

「Lightbox JS」是由Lokesh Dhakae使用Javascript所開發(目前最新的版本是2.05版)，中文翻譯有人翻成「光箱特效」，姑且不論名字，它的作用其實就是當你在載入圖片時，能夠有遮罩的效果，也不需要另開頁面來呈現，效果方面也是蠻炫的，可以用來美化你的Blog，各位可以到「官方網站」或「我的實際展示」先體驗看看。註：網路上也有jQuery的Lightbox版本

下載點：Lightbox2.05官網最新版本、備用載點

前置作業教學

在官網下載的檔案，需要做一些小修改才能運用，為了簡化操作的說明，我已經將程式碼修改好了，並將它放到我的空間中，各位可以利用下面的步驟直接使用即可，如果怕網址失連，想要將檔案放到自己空間的話，文章末有說明如何修改，請自行參考。

以Blogger為例，請到後台的「設計」→「修改HTML」頁面，將下面的語法放到「<head>」此關鍵字之後、或「</head>」之前、或「<body>」之後、或「</body>」之前，這四個位置我都測試過，可正常運作。

<link rel="stylesheet" href="http://bit.ly/cZwmXV" type="text/css" media="screen" /> <script src="http://bit.ly/9wn5Wi" type="text/javascript"></script> <script src="http://sites.google.com/site/freeisking/public-1/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="http://bit.ly/aFnqib" type="text/javascript"></script>

單圖使用教學

再來就是如何透過語法來使用Lightbox的特效了：圖片套用的語法如下所示(主要是 rel="lightbox" 的部分)

<a href="大圖的URL" rel="lightbox" title="設定標題"><img src="小圖的URL" alt="提示文字" border="0"/></a>

群組圖片使用教學

Lightbox JS亦提供了群組展示的功能，只要將欲呈現的圖片設成群組，便可方便的看多張圖片，看圖時可將滑鼠移到圖片的左半部或右半部，圖上就會自動顯示上一張、下一張的提示；群組圖片主要的設定方式為：將連結 rel="lightbox" 改成 rel="lightbox[群組名稱]"，群組名稱要用中括號包起來。

範例：將三張圖片設定為「Demo」的群組(要有縮圖、Title的話，請自行加入語法)
<a href="圖片1.jpg" rel="lightbox[Demo]">圖片 #1</a>
<a href="圖片2.jpg" rel="lightbox[Demo]">圖片 #2</a>
<a href="圖片3.jpg" rel="lightbox[Demo]">圖片 #3</a>

自製教學

上面的所說的做法是直接使用我修改好的檔案，如果你怕我的空間失連，想要自行修改並上傳到自己的空間，那可以參考以下的做法：

  • 下載原始檔案後，正常來說只要修改二個檔案即可：(1) lightbox.css：找到prevlabel.gif、nextlabel.gif，將原路徑改成他們在你空間中的網址，(2) lightbox.js：找到loading.gif、closelabel.gif，將原路徑改成他們在你空間中的網址
  • 在官網的檔案中，可由 index.html 找到下面的語法(這和我上面提供給各位使用的語樣相同，只是我已經修改過)，將紅色部分改成你空間中的檔案URL，確保這些檔案是可以取存取的到，最好把所有檔案放在相同的目錄下，不要有子目錄，以避免麻煩。

<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,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script>

通常會出錯的原因都是路徑存取不到，或修改以上檔案時有問題，若各位無法呈現Lightbox的效果，那可以先朝這方面看看，建議路徑方面最好是採固定的方式，存取比較不會有問題。

延伸閱讀：
．BoxOver 特效輕易讓文字、圖片顯現酷炫的提示訊息
．vTip 輕鬆讓文字、連結、圖片顯示美美的提示訊息
．[Blogger Hack] 替Blogger的訪客意見加上有趣的Yahoo符情符號