一、官网：

​​http://www.fancybox.net/​​​
文档：
​​​http://fancyapps.com/fancybox/#examples​​

注意：经测试该插件在jQuery2.0不能正常使用，可选用​​Lightbox​​

二、安装

1. 下载最新版本，引用js

引用css和js

fancyapps-fancyBox-v2.1.5/source/jquery.fancybox.css
fancyapps-fancyBox-v2.1.5/source/jquery.fancybox.pack.js

2. 使用示例

<a id="single_1" href="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_b.jpg" title="Codirosso spazzacamino (Massimo Greco _Foligno)">
    <img src="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_m.jpg" alt="" />
</a>
<a id="single_2" href="http://farm6.staticflickr.com/5612/15344856989_449794889d_b.jpg" title="Morning Twilight (Jose Hamra Images)">
    <img src="http://farm6.staticflickr.com/5612/15344856989_449794889d_m.jpg" alt="" />
</a>
<a id="single_3" href="http://farm8.staticflickr.com/7289/16207238089_0124105172_b.jpg" title="(Eric Goncalves (cathing up again!))">
    <img src="http://farm8.staticflickr.com/7289/16207238089_0124105172_m.jpg" alt="" />
</a>
<a id="single_4" href="http://farm9.staticflickr.com/8568/16388772452_f4d77a92c7_b.jpg" title="Arctic Paradise (Tom Draxler)">
    <img src="http://farm9.staticflickr.com/8568/16388772452_f4d77a92c7_m.jpg" alt="" />
</a>
$(document).ready(function() {
    $("#single_1").fancybox({
          helpers: {
              title : {
                  type : 'float'
              }
          }
      });

    $("#single_2").fancybox({
        openEffect  : 'elastic',
        closeEffect : 'elastic',

        helpers : {
            title : {
                type : 'inside'
            }
        }
    });

    $("#single_3").fancybox({
        openEffect : 'none',
        closeEffect : 'none',
        helpers : {
            title : {
                type : 'outside'
            }
        }
    });

    $("#single_4").fancybox({
        helpers : {
            title : {
                type : 'over'
            }
        }
    });
});

3. 简单的用法

加载一个远程图片

$.fancybox( {href : 'image.jpg', title : 'Lorem lipsum'} );

4. API

方法

名称

描述

open

$.fancybox.open( [group], [options] )，示例：

​​$.fancybox([{href : 'img1.jpg', title : 'Title'}, {href : 'img2.jpg', title : 'Title'} ]);​​

cancel

$.fancybox.cancel() 取消加载图片或ajax

close

$.fancybox.close( [force] ) (强制)关闭

play

$.fancybox.play()开始或停止展开

next

$.fancybox.next() 下一个

prev

$.fancybox.prev() 上一个

jumpto

$.fancybox.jumpto( [index] ) 跳到第几个

reposition

$.fancybox.reposition() 重新定位

updte

自动调整宽高

toggle

如果自适应则展开到全屏

showLoading

显示加载动画

hideLoading

隐藏加载动画

事件

事件

描述

onCacel

用户取消时

beforeLoad

加载内容前

afterLoad

加载内容后

beforeShow

打开动画前

afterShow

动画结束后

beforeClose

关闭前

afterClose

关闭动画结束后

onUpdate

窗口重画时

onPlayStart

幻灯片开始时

onPlayEnd

幻灯片结束时

三、其它问题

与easyui共用时，弹出层可能会遮挡图片显示，可以这样处理下：

$.fancybox({
    href: 'abc.jpg',
    title: 'title',
    afterLoad: function () {
        $(".fancybox-opened,.fancybox-overlay").css("z-index", 9999);
    }
});