LightBox 2.0

摘要 :

Lightbox是一個網頁的圖片展示效果,

中文有人翻為燈箱效果,

此篇是Lightbox開發網站上安裝教學的翻譯文.

原文網址 : http://www.huddletogether.com/projects/lightbox2/

先看效果 : http://ajunlee.googlepages.com/lightbox_picasaweb.htm

ps.相關檔案請從Lightbox 2.0專案網站上下載

如何使用:

第一步 - 設定

Lightbox v2.0 使用了 Prototype Framework 和 Scriptaculous Effects Library.

你需要先將這三個Javascript檔案設定在你網頁的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>

然後再將Lightbox的CSS檔也include進來 (或是將Lightbox的styles加入你現有的CSS檔中).

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

檢查CSS中prev.gif,next.gif的路徑是否正確,以及lightbox.js中loading.gif和close.gif的路徑是否沒問題.

第二步 - 啟動

在你要觸發lightbox效果的link上加上rel="lightbox"的屬性.例如:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

附註: 使如果你要顯示標題的話可以使用title的屬性來設定.

如果你有一個照片集要顯示的話,你可以在rel的屬性中加上群組的名稱. 例如:

<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>