【網頁製作】光箱效果 - Lightbox2

Lightbox是一個很棒的網頁秀圖效果，也很有質感。

這裡 是原始網站，裡面有效果展示可以點選看看，除了可以秀單張照片外，也可以是一整組相片。

語法使用:
1. 下載完需要的檔案解壓縮後會有三個資料夾，將css、images、js三個資料夾放置到網站根目錄。
2. 將底下三段語法加入該網頁head中，

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"
></script>
<script type="text/javascript" src="js/lightbox.js"></script>

3. 並將css連結到該網頁中

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

4. 製作一該照片小截圖連結到網頁後，再將rel="lightbox"語法
加到該照片語法前，
<a href="/images/圖片1.jpg" rel="lightbox" title="圖片的說明">圖片1</a>
＊其中title屬性可以顯示該圖片說明

5. 若該頁面中有很多圖片想讓它一次播放可以使用底下的語法:
<a href="images/圖片-1.jpg" rel="lightbox[roadtrip]">圖片1
</a>
<a href="images/圖片-2.jpg" rel="lightbox[roadtrip]">圖片2
</a>
<a href="images/圖片-3.jpg" rel="lightbox[roadtrip]">圖片3
</a>