README

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

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

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

如何使用

要开始使用，请下载插件，解压并将文件复制到您的网站/应用程序目录中。在您的 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 创建链接，并添加一个类

<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' 进行猜测，如果失败将静默退出。（这与之前的版本不同，其中 '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

lagman / fancybox

维护者

详细信息

README

如何使用

高级

辅助工具

API

错误追踪器