使用LightBox展示線上影像
文∕趙英傑
LightBox是一種在網頁上展示影像的JavaScript程式，非常好用，很適合用在線上相簿應用程式。一般在網頁上展示數位照片的方法，是先列出相片的縮圖，當用戶點選縮圖時，瀏覽器會切換（或者彈出新視窗）到顯示完整大圖的頁面。
LightBox運用了CSS圖層，可以在顯示縮圖的同一頁面展示大圖，並且淡化既有的內容。請點選底下的縮圖觀看效果：
由Lokesh Dhakar製作的LightBox程式，在網路上激起許多迴響，許多程式設計師也紛紛改進、擴充，或者用不同的技術仿效他的設計理念，其中不乏採用了時下當紅的AJAX技術的程式。這一篇Blog文章列舉了數種相關的LightBox程式，包含供WordPress使用的外掛程式（plug-in）模組。
筆者下載安裝的是LightBox JS 2.0.2版，解壓縮之後，您可以看到如下圖的目錄和index.html範例檔：
請將所有資料夾複製到網站根目錄，並在需要使用LightBox程式的網頁檔頭區（<head>與</head>之間），加入底下引用JavaScript和CSS的敘述：
<script type="text/javascript" src="js/prototype.js"> </script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"> </script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
接著在需要啟用LightBox程式的影像上，加入連結到大圖的超連結敘述。其中最重要的是，超連結<a>標籤當中，一定要加上rel="lightbox"屬性值，才能啟動LightBox。若需要在展示大圖的「面版」底下顯示文字敘述，請將此敘述寫在title屬性裡面。
<a href="大圖的路徑和檔名寫在這裡" rel="lightbox" title="此圖片的敘述寫在這裡…">超連結文字或圖片</a>
若要展示一連串相關群組的大圖，請採用底下的語法。在rel屬性中，用方刮號設定群組名稱（此例中的群組名稱叫做“roadtrip”），如此，當游標滑入影像範圍時，影像的右上或左上角就會出現“Next”（下一張）或“Prev”（上一張）文字：
<a href="images/image-1.jpg" rel="lightbox[roadtrip]"> image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]"> image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]"> image #3</a>
這樣的動態，想到這個網站的作品
http://lab.mathieu-badimon.com/
那個網站很酷，謝謝分享 🙂
感謝分享，我正需要，但怎麼都試不出來?可以幫我過目一下嗎?大感謝~
無標題文件
超連結文字或圖片
你的連結網址給錯了…
版大您好：
我實作了這個範例後，有一個需求，不曉得能不能做到
就是我希望在點擊圖片後，其下方會顯示「title=”此圖片的敘述寫在這裡…”」，我希望能夠顯示多行，這部份能夠做到嗎？或是有其他建議的特效可實現呢？感謝大大回覆～
我不確定有沒有現成的方案，不過，它本身是可以顯示多行文字（沒有強制斷行）。
或者，你可以試試像jQuery程式庫的方案，這裡有個jQuery用的Lightbox外掛模組：
http://leandrovieira.com/projects/jquery/lightbox/
搭配JavaScript/jQuery解析字串，就能達到你的要求了。
have fun!
jeffrey
感謝大大回應~~
我已經成功測試出來~~您說的沒錯，本身就可以多行顯示了
原因出在，我寫在.Net裡時，在title少加了單引號，造成了無法顯示的錯誤
但又多學了一些東西，真是太感謝你了~
感謝告知，不客氣 😉
請問LightBox 2.5要整 😀 麼用??