Lightbox 2.0
摘要 :
Lightbox是一個網頁的圖片展示效果,
中文有人翻為燈箱效果,
此篇是Lightbox開發網站上安裝教學的翻譯文.
先看效果 : LightBox 2.0 with picasaweb
LightBox 2.0
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>