Fancybox是一款基于JQuery开发的类LightBox插件，但比LightBox更绚丽。支持对图片添加阴影效果等，其主要特性如下：
1、可以显示图片、HTML元素、SWF影片、IFrames或者Ajax请求；
2、通过设置和CSS来实现定制化；
3、对相关图片分组，并添加导航操作；
4、如果页面添加了鼠标滚轮插件，Fancybox可以对鼠标滚轮事件进行响应；
5、添加阴影效果。
使用方法很简单：
1、下载Fancybox插件，包含以下几个文件：
jquery.fancybox-1.3.4.css
jquery.fancybox-1.3.4.js
jquery.fancybox-1.3.4.pack.js
jquery.easing-1.3.pack.js
jquery.mousewheel-3.0.4.pack.js
2、在页面内添加对js和css文件的引用；
3、html代码：
<div id="content"><a id="test1" href="images/1_big.jpg" mce_href="images/1_big.jpg"><img src="images/1_small.jpg" mce_src="images/1_small.jpg"></div>
javascript代码：
$(document).ready(function() { $("a#test1").fancybox({ 'opacity' : true, 'overlayShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); });
运行效果如下：
fancybox相关属性设置及说明：
opacity ---- box透明；
overlayShow ---- 遮罩层效果；
transitionIn ---- 渐入时的效果；
transitionOut ---- 淡出时的效果；
titlePosition ---- 标题显示位置，值可以为：inside,over等；
titleFormat ---- 标题显示格式；
type ---- 显示的类型(iframe, ajax等)；
width ---- 窗体宽度；
height ---- 窗体高度。
利用Fancybox实现相册浏览效果：
html代码:
<p> Image gallery <br /> <a rel="test_gallery" href="images/1_big.jpg" mce_href="images/1_big.jpg" title=""><img alt="" src="images/1_small.jpg" mce_src="images/1_small.jpg" /></a> <a rel="test_gallery" href="images/2_big.jpg" mce_href="images/2_big.jpg" title=""><img alt="" src="images/2_small.jpg" mce_src="images/2_small.jpg" /></a> <a rel="test_gallery" href="images/3_big.jpg" mce_href="images/3_big.jpg" title=""><img alt="" src="images/3_small.jpg" mce_src="images/3_small.jpg" /></a> <a rel="test_gallery" href="images/4_big.jpg" mce_href="images/4_big.jpg" title=""><img class="last" alt="" src="images/4_small.jpg" mce_src="images/4_small.jpg" /></a> </p>
javascript代码：
$("a[rel=test_gallery]").fancybox({ 'transitionIn' : 'none', 'transitionOut' : 'none', 'titlePosition' : 'over', 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>'; } });
效果图：
