[ad#content]是一个基于网络浏览器的应用程序，支持网络上最流行的媒体格式。使用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：

当然在头部还需要把你使用JS库加到前面。还有一个比较复杂的方法，就是在调用Shadowbox.init的时候，使用对象来指定一些选项，这样可以实现一些复杂的效果。

关于Shadowbox的复杂用法我会在下一篇文章里详细介绍。当我们加入所需要的JS库和CSS文件以后，就要告诉shadowbox对哪些链接 执行这些操作了。要执行这个操作有两种方法，一个是在链接的标签里添加属性，还有一个方法是用Javascript对Shadowbox进行设置。

在这篇文章主要介绍在链接的标签里添加属性，只要在链接里增加一个属性rel=”shadowbox”就可以了。假设你页面里有一个这样的链接：

要建立shadowbox的效果之需要修改成这样即可：

这时当你点击它的时候，就会在本页面打开一个弹出层来显示href里的图片。这种方法对于页面展示小图，点击以后展示大图有着很好的用户体验。这种 效果就和lightbox展示的效果一样。（如果大家对lightbox不熟悉的话，我会在以后的文章中详细介绍它的主要用法）

如果你想显示图片标题，只需在链接属性里添加一个title。

如果你想给弹出来的媒体设定长与宽的话，只要在rel属性中添加width和height就可以，用”;”号隔开，默认是以Pixel为单位，

除了显示单张图片和电影以外，还可以显示画廊效果，如果想显示这一效果之需要在rel的shadowbox后面紧跟着一个用中括号括起来的画廊名 字，这个名字是随便起的，不过需要注意的是，画廊名字相同的图片是在一个画廊里，下面以画廊名为“Vacation”的两个图片做为例子：

画廊可能由许多不同类型的内容。下面的标记显示不同的媒介，如何能成为一个单一的库相结合。

这篇文章先介绍这么多，熟悉这些用法，就可以在自己的页面里添加Shadowbox的效果了。在后面的文章里我会继续介绍Shadowbox的其他一些用法。