fancybox

前端 灯箱
FancyBox提供了一种简洁优雅的方式去为图片、网页和多媒体添加灯箱功能。

fancyBox

FancyBox提供了一种简介优雅的方式去为图片、网页和多媒体添加灯箱功能。更多信息和例子请查看: http://www.fancyapps.com/fancybox/

许可: http://www.fancyapps.com/fancybox/#license

如何使用

首先下载插件,解压然后复制文件到你的网站/项目文件夹中。在 中加载文件。确保你已经加载了 jQuery:

<head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
     <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
     <script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
</head>

创建你自己的链接,加上 fancybox 样式名,如果你想显示一个标题,那就给该链接加上一个 title 属性。

<a href="large_image.jpg" class="fancybox" title="Sample title"><img src="small_image.jpg" /></a>

如果你有一组相关的图片,你得额外加上一个 rel(或 data-fancybox-group) 属性,给其赋一个组名:

<a href="large_1.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="small_1.jpg" /></a>
<a href="large_2.jpg" class="fancybox" rel="gallery" title="Sample title 1"><img src="small_2.jpg" /></a>

用如下脚本初始化:

<script>
   $(document).ready(function() {
      $('.fancybox').fancybox();
  });
</script>

你也可以给初始化脚本加上一些可选项来扩展默认的配置,比如:

<script>
  $(document).ready(function() {
    $('.fancybox').fancybox({
      padding : 0,
      openEffect  : 'elastic'
    });
  });
</script>

提示: 自动分组然后将 fancyBox 应用到所有图片上:

$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();

脚本用到了匹配的元素的 href 属性来取得内容的位置,以及找出你想要展示的内容类型。

你可以通过添加样式名(fancybox.image, fancybox.iframe, 等等)或者 data-fancybox-type 属性来直接指定类型:

//Ajax:
<a href="/example.html" class="fancybox fancybox.ajax">Example</a>
//or
<a href="/example.html" class="fancybox" data-fancybox-type="ajax">Example</a>

//Iframe:
<a href="example.html" class="fancybox fancybox.iframe">Example</a>

//Inline (will display an element with `id="example"`)
<a href="#example" class="fancybox">Example</a>

//SWF:
<a href="example.swf" class="fancybox">Example</a>

//Image:
<a href="example.jpg" class="fancybox">Example</a>

注意,ajax 请求会受到 同源策略 的影响。如果 fancyBox 不能获得内容类型,它将会根据 href 属性值来猜测,如果不成功就会静默退出(这和以前的版本是不一样的,如果猜测不成功就会展示一个错误信息)。

进阶

Helpers

Helpers 提供了一个简单的机制来扩展 fancyBox 的功能 。有两个内置的 helpers - 'overlay' 和 'title'。你可以禁用它们,设置自定义的选项或者启用其它的 helpers,例如:

//禁用 title helper
$(".fancybox").fancybox({
    helpers:  {
        title:  null
    }
});

//禁用 overlay helper
$(".fancybox").fancybox({
    helpers:  {
        overlay : null
    }
});

//改变 title 的位置和 overlay 的颜色
$(".fancybox").fancybox({
    helpers:  {
        title : {
            type : 'inside'
        },
        overlay : {
            css : {
                'background' : 'rgba(255,255,255,0.5)'
            }
        }
    }
});

//启用 thumbnail helper 并且设置自定义选项
$(".fancybox").fancybox({
    helpers:  {
        thumbs : {
            width: 50,
            height: 50
        }
    }
});

API

事件驱动的回调方法也是可用的。 this 关键字指的是当前或者即将到来的对象(取决于回调方法)。下面的例子是如何修改 标题:

$(".fancybox").fancybox({
    beforeLoad : function() {
        this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');

        /*
            "this.element" 指的是当前的元素,所以你可以,比如用图片的 `title` 属性来存储标题
            this.title = $(this.element).find('img').attr('alt');
        */
    }
});

我们可以通过程序以多种方式来打开 fancyBox:

//HTML content:
$.fancybox( '<div><h1>Lorem Lipsum</h1><p>Lorem lipsum</p></div>', {
    title : 'Custom Title'
});

//DOM element:
$.fancybox( $("#inline"), {
    title : 'Custom Title'
});

//Custom object:
$.fancybox({
    href: 'example.jpg',
    title : 'Custom Title'
});

//Array of objects:
$.fancybox([
    {
        href: 'example1.jpg',
        title : 'Custom Title 1'
    },
    {
        href: 'example2.jpg',
        title : 'Custom Title 2'
    }
], {
    padding: 0
});

有多种方式来允许我们交互和操作 fancyBox,比如:

//关闭 fancybox:
$.fancybox.close();

有一种简单的方式来用 JS 访问包装元素:

$.fancybox.wrap
$.fancybox.skin
$.fancybox.outer
$.fancybox.inner

你可以通过覆写 CSS 来自定义 fancyBox 的外观。比如,让导航箭头一直显示,改变其宽度,将它们移出区域(在引用了 fancybox.css 之后引入下面的代码)

.fancybox-nav span {
    visibility: visible;
}

.fancybox-nav {
    width: 80px;
}

.fancybox-prev {
    left: -80px;
}

.fancybox-next {
    right: -80px;
}   

在这种情况下,你或许想要增加 fancybox 周围的空白区:

$(".fancybox").fancybox({
   margin : [20, 60, 20, 60]
});

Bug 跟踪器

有 bug?请在 GitHub 上创建一个 https://github.com/fancyapps/fancyBox/issues

fancybox 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论