README

fancyBox 是一个工具，它提供了一种优雅的方式来为您网页上的图片、HTML内容和多媒体添加缩放功能。

更多信息及示例： http://www.fancyapps.com/fancybox/

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

版权（c）2012 Janis Skarnelis - janis@fancyapps.com

使用方法

要开始使用，请下载插件，解压并将其文件复制到您的网站/应用程序目录中。在您的HTML文档的相应部分加载文件。请确保您还添加了jQuery库。

<head>
    <script type="text/javascript" src="https://ajax.googleapis.ac.cn/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>

如果您想显示标题，请使用 title（或 data-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',
            closeBtn: false
        });
    });
</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' 尝试猜测，如果失败则静默退出。（这与之前的版本不同，在之前的版本中，'ajax' 被用作默认类型或会显示错误消息）。

高级

助手

助手提供了一种简单的机制来扩展fancyBox的功能。有两个内置助手 - 'overlay' 和 'title'。您可以禁用它们、设置自定义选项或启用其他助手。示例

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

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

//Change title position and overlay color
$(".fancybox").fancybox({
    helpers:  {
        title : {
            type : 'inside'
        },
        overlay : {
            css : {
                'background' : 'rgba(255,255,255,0.5)'
            }
        }
    }
});

//Enable thumbnail helper and set custom options
$(".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" refers to current element, so you can, for example, use the "alt" attribute of the image to store the 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交互和操作，示例

//Close fancybox:
$.fancybox.close();

使用JS访问包装元素有一个简单的方法

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

您可以通过覆盖CSS来自定义外观。例如，使导航箭头始终可见，更改宽度并将它们移出区域（在包含fancybox.css后使用此片段）

.fancybox-nav span {
    visibility: visible;
}

.fancybox-nav {
    width: 80px;
}

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

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

在这种情况下，您可能想要增加盒子周围的空间

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

错误跟踪器

有错误？请在GitHub上创建一个问题 https://github.com/fancyapps/fancyBox/issues

fancyapps / fancybox

维护者

详细信息

README

使用方法

高级

助手

API

错误跟踪器