Loading...Please wait...
【Blogger】Lightbox Effect
2007-05-03 by tacojohn
第一次看到Lightbox的特效是在強者我同事狗頭的布洛格上看到的，當時就對它的呈現方式感到相當的驚艷、滿意!!這兩天稍微研究一下，在不更動原始碼的情況下，其實安裝根本就是無痛，三分鐘就安裝完成了!!
介紹如何無痛安裝之前，先介紹一下什麼是Lightbox好了!!
Lightbox基本上是一種在網頁上展示影像的JavaScript程式。一般我們在網頁上秀圖的方式，通常是利用該圖的縮圖當連結，當使用者點選該圖時，再連結到原始大圖的頁面做完整的顯示。而Lightbox則是利用JavaScript運用CSS的Overlay，在同一頁面展示大圖，並且淡化原有的背景內容進而突顯照片內容。
如同原作者Lokesh Dhakar在其網站所說的一樣：
Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.
簡單說，就是Lightbox是一個可以在所有的瀏覽器上安裝、執行的一個很簡單、低調的一種Script!!好個低調啊!!!!
光說不練非君子，下面來個展示DEMO吧~~
- 單一圖檔
- 圖檔群組顯示
有沒有很炫呀?!很好，點燃你心中熊熊的烈火後，我們就開始無痛安裝囉~~
Part 1 - 安裝Setup
- Lightbox使用了Prototype及Scriptaculous這兩個Library。加上主程式lightbox，總共必須在你的網頁的header引入這三支JavaScript。這三支程式都可以在原作者網站下載得到。
- 一樣，先進入控制後台頁面->範本頁籤->修改HTML，在</BODY>之前的HEADER內加上下列程式(請照順序加入)
<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> - 再來，要加入CSS的部份，一樣，加入下面程式
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> - 上面的檔案位址請自行確認是否正確，另外這個特效會使用到幾個圖檔(都包含在下載下來的檔裡)，也請確認一下lightbox.js及lightbox.css這兩個檔的內容，其中連結的圖檔位址是否正確囉!!
- 儲存，安裝完成，如何，很簡單吧!!!
Part 2 - 執行Activate
- 要執行其實很簡單啦，只要在縮圖、或是要連結該特效的超連結上加入下面紅色部份的語法即可
<a href="image-link.jpg" rel="lightbox" title="my caption">image</a>
其中，rel這個attribute是用來Identify是要用lightbox這個特效囉，title這個attribute則是在使用Lightbox特效時，左下角的Caption顯示的文字，titlle這個attribute是optional的哦!! - 剛上面是像Demo1的單一圖檔的效果，如果要用群組的方式，連續秀圖的話可以用下面的語法
<a href="image-1.jpg" rel="lightbox[groupname]">image #1</a>
<a href="image-2.jpg" rel="lightbox[groupname]">image #2</a>
<a href="image-3.jpg" rel="lightbox[groupname]">image #3</a>
上面的lightbox[groupname]部份，記得groupname要使用同樣的名稱哦!! - 打完收工!!
Enjoy It!!!
基本上，我上面的教學只是翻譯自原文啦，有興趣的請自行上原文網站查閱囉!!
※參考來源：
．Lightbox2
請問lightbox的底色，要如何換成黑色的呢？