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=\'#\'" /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=\'#\'" /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的其他一些用法。