Fancybox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽。Fancybox 是一款很绚丽的 jquery 弹出层展示插件，该lightbox除了能够展示图片之外，还可以展示iframed内容， 通过css自定义外观。

 

官方网站：http://www.fancybox.net/home

 

下载地址：https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/fancybox/jquery.fancybox-1.3.4.zip

 

使用示例：

 

1、引入Jquery文件

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

 

2、引入Fancybox样式文件

 

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

 

3、在需要使用Fancybox的图片中加上属性

 

<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>

<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>

 

<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a> 

<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""/></a>

 

4、JS文件控制：

 

<script type="text/javascript">

    jQuery(document).ready(function ($) {

        $("a[rel=group1]").fancybox({

            'titleShow': true,

            'transitionIn': 'none',

            'showNavArrows': true,

            'transitionOut': 'none'

        });

    })

</script>