jQuery弹出层插件Fancybox

Fancybox是一款优秀的jquery插件，它能够展示丰富的弹出层、弹出框、弹出窗口效果。前面我们有文章介绍了facybox弹出层效果，相比facybox，fancybox显得功能更为齐全，它除了可以加载DIV，图片、图片集、Ajax数据，还能加载SWF影片，iframe页面等等。Fancybox目前最新版本是3.2.1，使用方法跟v2相差无几，只是控制显示样式、效果的参数选项有些变化。

Fancybox的特点：
可以支持图片、html文本、flash动画、iframe以及ajax的支持
可以自定义播放器的CSS样式
可以以组的形式进行播放
如果将鼠标滚动插件（mouse wheel plugin）包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片
Fancybox播放器支持投影，更有立体的感觉
Fancybox使用方法：
1、引入jquery核心库和Fancybox插件库
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.fancybox.min.js"></script>
2、添加样式表文件
<link rel="stylesheet" href="jquery.fancybox.min.css" type="text/css" media="screen">
3、在页面上创建链接元素
A、图片元素
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" kesrc="image_small.jpg" alt=""></a>
B、普通文本
<a id="inline" href="#data" kesrc="#data">This shows content of element who has id="data"</a> 
<div style="display: none;">
    <div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
C、Iframe
<a href="http://www.example?iframe">This goes to iframe</a> 
或者
 <a class="iframe" href="http://www.example.com">This goes to iframe</a>
D、Ajax
<a href="http://www.example/data.php">This takes content using ajax</a>
如果你要显示描述信息，可以在链接上加上title，将描述信息放到title中。

使用 JavaScript 初始化

实际测试，按照步骤做完上面三步即可在单击图片时调用 Fancybox v3.x 的灯箱了。不过通过这第四步可以修改灯箱组件的默认选项设置。使用 jQuery 选择器选择带有 data-fancybox 属性的元素并调用 fancybox 方法，来给该元素绑定 fancyBox 事件：

<script type="text/javascript">
         $("[data-fancybox]").fancybox({
           // 这里是选项
         });
       </script>
       $(document).ready(function() { 
               
           $("a#single_image").fancybox();     
               
           $("a#inline").fancybox({
               'hideOnContentClick': true
           });
               
           $("a.group").fancybox({
               'transitionIn'  :   'elastic',
               'transitionOut' :   'elastic',
               'speedIn'       :   600, 
               'speedOut'      :   200, 
               'overlayShow'   :   false
           });
       });

Fancybox的API和配置选项参数说明