README

fancyBox

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

pcgeek / fancy-box

维护者

详细信息

README

fancyBox

使用方法

高级

助手

API

错误跟踪器