常用的JS插件介绍：5、fancybox——弹出图片展示

官网：

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

安装

下载最新版本，引用js

引用css和js

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

使用示例

<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'
            }
        }
    });
});

简单的用法

加载一个远程图片

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

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);
    }
});