JS的燈箱插件Shadowbox,支持圖片、視頻、網頁、flash、FLV等媒體輪播

是一個基於網絡瀏覽器的應用程序，支持網絡上最流行的媒體格式。使用Shadowbox訪問各式各樣的媒體時，用戶可以直接在所有主流的瀏覽器中瀏覽，而且不用去打開一個新的媒體頁。
這裏說媒體主要包括：圖片，SWF，QuickTime，Video和一些網絡Video等等。

 

Shadowbox使用Javascript和CSS編寫，可以定製當前非常流行的各種JS庫，比如說：
* jQuery
* Prototype
* MooTools (requires 1.2 Core)
* Dojo Toolkit
* Yahoo! User Interface Library (requires yahoo-dom-event.js)
* Ext (requires ext-core.js)
所以大家還是非常值得一試的，下面是它的官方網站和下載地址，下載的時候可以選擇你所使用JS庫文件和你所希望播放的媒體：
官方地址：http://www.shadowbox-js.com/index.html
下載地址：http://www.shadowbox-js.com/download.html

下面給給大家介紹一下這個應用的具體用法，最簡單的辦法就是在你建立應用的頁面頭部加入下載的JS文件和CSS文件，然後調用Shadowbox.init：

1. <link rel="stylesheet" type="text/css" href="shadowbox.css">
2. <script type="text/javascript" src="shadowbox.js"></script>
3. <script type="text/javascript">
4. Shadowbox.init();
5. </script>

當然在頭部還需要把你使用JS庫加到前面。還有一個比較複雜的方法，就是在調用Shadowbox.init的時候，使用對象來指定一些選項，這樣可以實現一些複雜的效果。

1. <link rel="stylesheet" type="text/css" href="shadowbox.css">
2. <script type="text/javascript" src="shadowbox.js"></script>
3. <script type="text/javascript">
4. Shadowbox.init({
5.     handleOversize: "drag",
6.     modal: true
7. });
8. </script>

關於Shadowbox的複雜用法我會在下一篇文章裏詳細介紹。當我們加入所需要的JS庫和CSS文件以後，就要告訴shadowbox對哪些鏈接執行這些操作了。要執行這個操作有兩種方法，一個是在鏈接的標籤裏添加屬性，還有一個方法是用Javascript對Shadowbox進行設置。

在這篇文章主要介紹在鏈接的標籤裏添加屬性，只要在鏈接裏增加一個屬性rel=”shadowbox”就可以了。假設你頁面裏有一個這樣的鏈接：

1. <a href="myimage.jpg">My Image</a>

要建立shadowbox的效果之需要修改成這樣即可：

1. <a href="myimage.jpg" rel="shadowbox">My Image</a>

這時當你點擊它的時候，就會在本頁面打開一個彈出層來顯示href裏的圖片。這種方法對於頁面展示小圖，點擊以後展示大圖有着很好的用戶體驗。這種效果就和lightbox展示的效果一樣。（如果大家對lightbox不熟悉的話，我會在以後的文章中詳細介紹它的主要用法）

如果你想顯示圖片標題，只需在鏈接屬性裏添加一個title。

1. <a href="myimage.jpg" rel="shadowbox" title="My Image">My Image</a>

如果你想給彈出來的媒體設定長與寬的話，只要在rel屬性中添加width和height就可以，用”;”號隔開，默認是以Pixel爲單位，

1. <a href="mymovie.swf" rel="shadowbox;height=140;width=120">My Movie</a>

除了顯示單張圖片和電影以外，還可以顯示畫廊效果，如果想顯示這一效果之需要在rel的shadowbox後面緊跟着一個用中括號括起來的畫廊名字，這個名字是隨便起的，不過需要注意的是，畫廊名字相同的圖片是在一個畫廊裏，下面以畫廊名爲“Vacation”的兩個圖片做爲例子：

1. <a href="beach.jpg" rel="shadowbox[Vacation]">The Beach</a>
2. <a href="pier.jpg" rel="shadowbox[Vacation]">The Pier</a>

畫廊可能由許多不同類型的內容。下面的標記顯示不同的媒介，如何能成爲一個單一的庫相結合。

1. <a rel="shadowbox[Mixed];" href="myimage.jpg">jpg</a>
2. <a rel="shadowbox[Mixed];width=520;height=390" href="myswf.swf">swf</a>
3. <a rel="shadowbox[Mixed];width=292;height=218" href="mymovie.mp4">movie</a>
4. <a rel="shadowbox[Mixed]" href="mywebsite.html">iframe</a>

這篇文章先介紹這麼多，熟悉這些用法，就可以在自己的頁面裏添加Shadowbox的效果了。在後面的文章裏我會繼續介紹Shadowbox的其他一些用法。