【翻译】fancyBox3 中文文档

时间 2019-12-01

标签翻译 fancybox3 fancybox 中文文档繁體版

原文原文链接

fancyBox3 中文文档

译文永久地址：kangkai124.github.io/fancybox/javascript

说明：本文档仅供参考，更新不及时请查看官方文档php

1. 介绍

fancyBox 是一个 JavaScript 库，它以优雅的方式展现图片，视频和一些 html 内容。它包含你所指望的一切特性 —— 支持触屏，响应式和高度自定义。css

1.1 依赖

推荐 jQuery 3+，可是 fancyBox 仍支持 jQery 1.9.1+ 和 jQuery 2+ 。html

注意java

若是你在图片缩放时遇到了问题，请升级 jQuery 到最近版本（至少v3.2.1）。jquery

1.2 兼容

fancyBox 支持触屏操做，并且支持缩放等手势操做。在移动端和PC端上都十分合适。git

fancyBox 已经在下列浏览器中测试：github

Chrome
firefox
IE10/11
Edge
IOS Safari
Nexus 7 Chrome

2. 配置

能够在 html 文档中引入.css和.js来使用fancyBox，确保在这以前引入了 jQuery 库。下面是使用fancyBox的一个基本的HTML模板：web

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>My page</title>

	<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>

	<!-- Your HTML content goes here -->

	<!-- JS -->
	<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="jquery.fancybox.min.js"></script>
</body>
</html>
复制代码

注意ajax

要先引入jQuery

若是页面中已经引入过jQuery，不能再次引入

不要同时引入 fancybox.js 和 fancybox.min.js

一些方法（ajax，iframes 等）必须在一个web服务器上才能够正常运行，在浏览器打开一个本地文件是没法正常工做的

2.1 下载fancyBox

能够在 GIthub 下载最新的版本。

或者直接引用 cdnjs —cdnjs.com/libraries/f…。

2.2 包管理工具

fancyBox 还能够通多 npm 和 Bower安装。

# NPM
npm install @fancyapps/fancybox --save

# Bower
bower install fancybox --save
复制代码

3. 使用

3.1 使用 data 属性初始化

最基本的用法是经过添加 data-fancybox 属性到一个超连接标签。标题能够经过 data-capiton 添加。例如：

<a href="image.jpg" data-fancybox data-caption="My caption">
	<img src="thumbnail.jpg" alt="" />
</a>
复制代码

在 CodePen 上查看例子

这种方式使用默认的配置，能够查看选项进行自定义配置，或者使用data-options属性。

3.2 使用 JavaScript 初始化

使用 jQuery 选择器选择一个元素，而后调用fancybox方法：

<script type="text/javascript">
	$("[data-fancybox]").fancybox({
		// Options will go here
	});
</script>
复制代码

在 CodePen 上查看例子

使用这种方式，只有被选中的元素才能够触发点击事件。

为了能够如今或以后存在的元素均可以触发点击事件，使用selector选项。例如：

$().fancybox({
  selector : '[data-fancybox="images"]',
  loop     : true
});
复制代码

在 CodePen 上查看例子

3.3 手动调用 fancyBox

fancyBox 容许使用 JavaScrip t以任意形式触发，所以没必要须要经过某一个元素触发。下面例子为展现一段简单的信息：

$.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');
复制代码

在 CodePen 上查看例子

经过 API 查看更多的信息和例子。

3.4 分组

若是你有一组元素，组内元素使用相同的 data-fancybox 值就能够组成一个相册。不一样的组应该使用不一样的属性值加以区分。

<a href="image_1.jpg" data-fancybox="group" data-caption="Caption #1">
	<img src="thumbnail_1.jpg" alt="" />
</a>

<a href="image_2.jpg" data-fancybox="group" data-caption="Caption #2">
	<img src="thumbnail_2.jpg" alt="" />
</a>
复制代码

在 CodePen 上查看例子

注意

fancyBox根据给定的url本身尝试检测内容的类型。若是没法检测，该类型可使用data-type属性手动添加。

<a href="images.php?id=123" data-type="image" data-caption="Caption">
	Show image
</a>
复制代码

4. 媒体类型

4.1 图片

使用 fancyBox 的标准作法是用小尺寸的图片连接到大尺寸图片：

<a href="image.jpg" data-fancybox="images" data-caption="My caption">
	<img src="thumbnail.jpg" alt="" />
</a>
复制代码

在 CodePen 上查看例子

默认状况下，fancyBox 会在一张图片展现前进行预加载。你能够选择当即显示图片，这样当加载完成后会立刻渲染和显示完整尺寸的图片。不过，如下属性是必须添加的：

data-width - 图片的完整宽度
data-height - 图片的完整高度

<a href="image.jpg" data-fancybox="images" data-width="2048" data-height="1365">
    <img src="thumbnail.jpg" />
</a>
复制代码

在 CodePen 上查看例子

fancyBox 支持 scrset，它的做用是根据不一样的可视区域显示不一样尺寸的图片。你可使用这个属性来减小移动端用户的下载时间。例如：

<a href="medium.jpg" data-fancybox="images" data-srcset="large.jpg 1600w, medium.jpg 1200w, small.jpg 640w">
	<img src="thumbnail.jpg" />
</a>
复制代码

在 CodePen 上查看例子

fancyBox 还支持禁止右键下载来保护图片。固然这没法阻止那些下定决心下载的用户，可是可让大多数想要盗取你文件的用户打消这个念头。

$('[data-fancybox]').fancybox({
  protect: true
})
复制代码

在 CodePen 上查看例子

4.2 行内 HTML

对于行内元素，你须要建立一个隐藏的元素并添加独特的 id 属性：

<div style="display: none;" id="hidden-content">
	<h2>Hello</h2>
	<p>You are awesome.</p>
</div>
复制代码

而后只须要建立一个带有 data-src 属性的超连接，该属性值匹配以前隐藏元素的id（优先使用# ）：

<a data-fancybox data-src="#hidden-content" href="javascript:;">
	Trigger the fancyBox
</a>
复制代码

在 CodePen 上查看例子

这段代码会产生一个关闭按钮（若是你没有经过 smallBtn: false 禁用的话），这个按钮只设置了居中。所以你能够很轻松地经过css来自定义样式。

4.3 Ajax

想要经过 Ajax 加载内容，须要在超连接添加 data-type="ajax" 属性：

<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:;">
	AJAX content
</a>
复制代码

在 CodePen 上查看例子

另外，可使用 data-filter 属性定义一个选择器，来显示响应的一部分。这个选择器须要是一个合法的 jQuery 选择器：

<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" data-filter="#two" href="javascript:;">
	AJAX content
</a>
复制代码

在 CodePen 上查看例子

4.4 Iframe

若是内容能够展现在页面，而且放在 iframe 中不会被脚本或者安全策略禁止，它就能够在 fancyBox 中展现：

<a data-fancybox data-type="iframe" data-src="http://codepen.io/fancyapps/full/jyEGGG/" href="javascript:;">
	Webpage
</a>

<a data-fancybox data-type="iframe" data-src="https://mozilla.github.io/pdf.js/web/viewer.html" href="javascript:;">
	Sample PDF
</a>
复制代码

在 CodePen 上查看例子

若是嵌入了 iframe，能够从父容器中访问和控制 fancyBox：

// 根据内容调整 iframe 的高度
parent.jQuery.fancybox.getInstance().update();

// 关闭当前的 fancyBox 实例
parent.jQuery.fancybox.getInstance().close();
复制代码

Iframe 尺寸能够通多 CSS 调整：

.fancybox-slide--iframe .fancybox-content {
	width : 800px;
	height : 600px;
	max-width : 80%;
	max-height : 80%;
	margin: 0;
}
复制代码

若是须要的话，CSS 样式能够被 JS 覆盖：

$("[data-fancybox]").fancybox({
	iframe : {
		css : {
			width : '600px'
		}
	}
});
复制代码

若是你没有禁止 iframe 的预加载（使用preload），那么fancyBox会尝试计算内容的尺寸，而且会根据内容来调整 iframe 的宽高。注意，这依赖于同源策略，所以会有一些限制。

下面这个例子禁止了 iframe 的预加载，而且用取消按钮代替了工具栏。

$('[data-fancybox]').fancybox({
	toolbar  : false,
	smallBtn : true,
	iframe : {
		preload : false
	}
})
复制代码

在 CodePen 上查看例子

5. 嵌入

支持的网站能够展现在 fancyBox 中，只须要提供页面的地址便可：

<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
  YouTube video
</a>

<a data-fancybox href="https://vimeo.com/191947042">
  Vimeo video
</a>

<a data-fancybox href="https://www.google.com/maps/search/Empire+State+Building/">
	Google Map
</a>

<a data-fancybox href="https://www.instagram.com/p/BNXYW8-goPI/?taken-by=jamesrelfdyer" data-caption="<span title=&quot;Edited&quot;>balloon rides at dawn ✨🎈<br>was such a magical experience floating over napa valley as the golden light hit the hills.<br><a href=&quot;https://www.instagram.com/jamesrelfdyer/&quot;>@jamesrelfdyer</a></span>">
	Instagram photo
</a>
复制代码

在 CodePen 上查看例子

5.1 视频尺寸

经过 CSS 调整视频的显示大小：

.fancybox-slide--video .fancybox-content {
	width  : 800px;
	height : 600px;
	max-width  : 80%;
	max-height : 80%;
}
复制代码

在 CodePen 上查看例子

显然，你能够选择你喜欢的尺寸。部分未支持的画面比例，能够参照这个方法。

5.2 视频参数

经过 url 中的参数控制视频

<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk&amp;autoplay=1&amp;rel=0&amp;controls=0&amp;showinfo=0">
  YouTube video - hide controls and info
</a>

<a data-fancybox href="https://vimeo.com/191947042?color=f00">
  Vimeo video - custom color
</a>
复制代码

在 CodePen 上查看例子

经过 JavaScript 控制视频：

$('[data-fancybox]').fancybox({
	youtube : {
		controls : 0,
		showinfo : 0
	},
	vimeo : {
		color : 'f00'
	}
});
复制代码

在 CodePen 上查看例子

6. 选项

默认选项值快速参考：

var defaults = {

    // 相册循环浏览
    loop : false,

    // 图片周围的margin，若是视口（viewport）宽度小于800px则忽略
    margin : [44, 0],

    // Horizontal space between slides
    gutter : 50,

    // 键盘浏览
    keyboard : true,

    // 是否在屏幕边缘显示箭头
    arrows : true,

    // 是否显示infobar (顶部的counter and arrows)
    infobar : true,

    // 是否显示顶部的toolbar
    toolbar : true,

    // 控制顶部toolbar里显示的图表
  	// 经过`btnTpl`选项的模板建立按钮，并被放置在toolbar(class="fancybox-toolbar"`的元素)中
    buttons : [
        'slideShow',
        'fullScreen',
        'thumbs',
        'share',
        //'download',
        //'zoom',
        'close'
    ],

    // 探测"idle"的时间(秒)
    idleTime : 3,

    // 是否在右上角显示关闭按钮
  	// 若是设置为'auto',遇到内容类型为html,inline,ajax时显示
    // Use template from `btnTpl.smallBtn` for customization
    smallBtn : 'auto',

    // 保护文件，禁止右键下载
    protect : false,

    // Shortcut to make content "modal" - 禁止键盘浏览，隐藏按钮等
    modal : false,

    image : {
      	// 预加载
      	// 须要预约义图片的尺寸
      	// 设置为'auto'，自动在预览图中缩放
        preload : "auto"

    },

    ajax : {

        // 请求 ajax 的配置
        settings : {
          	// 代表请求是从模态框中发起，名字可改
            data : {
                fancybox : true
            }
        }

    },

    iframe : {

        // Iframe 模板
        tpl : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen allowtransparency="true" src=""></iframe>',

        // 预加载
        // 因为同源策略，不能加载跨域数据
        preload : true,

      	// 自定义包裹 iframe 的元素的 CSS 样式
      	// 这样就能够自定义 iframe 的尺寸
        css : {},

        // iframe 标签属性
        attr : {
            scrolling : 'auto'
        }

    },

    // 若是内容类型不能自动检测出来，默认值为'image'
    defaultType : 'image',

    // 打开/关闭动画类型
    // 可用的值:
    // false - disable
    // "zoom" - zoom images from/to thumbnail
    // "fade"
    // "zoom-in-out"
    //
    animationEffect : "zoom",

    // 打开/关闭动画使用的时间，ms
    animationDuration : 500,

    // 图片缩放时是够改变透明度
  	// 若是透明度为'auto'，那么图片和缩略图比例不一致时透明度将会发生改变
    zoomOpacity : "auto",

    // 滑块动画
    //
    // 可用的值:
    // false - disable
    // "fade'
    // "slide'
    // "circular'
    // "tube'
    // "zoom-in-out'
    // "rotate'
    //
    transitionEffect : "fade",

    // 动画持续时间，ms
    transitionDuration : 366,

    // 自定义的滑块的 class 值
    slideClass : '',

    // 自定义的布局的 class 值
    baseClass : '',

    // 布局的模板
    baseTpl	:
        '<div class="fancybox-container" role="dialog" tabindex="-1">' +
            '<div class="fancybox-bg"></div>' +
            '<div class="fancybox-inner">' +
                '<div class="fancybox-infobar">' +
                    '<span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span>' +
                '</div>' +
                '<div class="fancybox-toolbar">{{buttons}}</div>' +
                '<div class="fancybox-navigation">{{arrows}}</div>' +
                '<div class="fancybox-stage"></div>' +
                '<div class="fancybox-caption-wrap"><div class="fancybox-caption"></div></div>' +
            '</div>' +
        '</div>',

    // 加载中时的模板
    spinnerTpl : '<div class="fancybox-loading"></div>',

    // 错误时的模板
    errorTpl : '<div class="fancybox-error"><p>{{ERROR}}<p></div>',

    btnTpl : {

        download : '<a download data-fancybox-download class="fancybox-button fancybox-button--download" title="{{DOWNLOAD}}">' +
                    '<svg viewBox="0 0 40 40">' +
                        '<path d="M20,23 L20,8 L20,23 L13,16 L20,23 L27,16 L20,23 M26,28 L13,28 L27,28 L14,28" />' +
                    '</svg>' +
                '</a>',

        zoom : '<button data-fancybox-zoom class="fancybox-button fancybox-button--zoom" title="{{ZOOM}}">' +
                    '<svg viewBox="0 0 40 40">' +
                        '<path d="M 18,17 m-8,0 a 8,8 0 1,0 16,0 a 8,8 0 1,0 -16,0 M25,23 L31,29 L25,23" />' +
                    '</svg>' +
                '</button>',

        close : '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="{{CLOSE}}">' +
                    '<svg viewBox="0 0 40 40">' +
                        '<path d="M10,10 L30,30 M30,10 L10,30" />' +
                    '</svg>' +
                '</button>',

      	// 若是'smallBtn'没有设置为 false，默认关闭按钮将会被放置在你的 html/inline/ajax 内容中
        smallBtn   : '<button data-fancybox-close class="fancybox-close-small" title="{{CLOSE}}"></button>',

        // 箭头
        arrowLeft : '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}">' +
                        '<svg viewBox="0 0 40 40">' +
                          '<path d="M10,20 L30,20 L10,20 L18,28 L10,20 L18,12 L10,20"></path>' +
                        '</svg>' +
                      '</button>',

        arrowRight : '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}">' +
                      '<svg viewBox="0 0 40 40">' +
                        '<path d="M30,20 L10,20 L30,20 L22,28 L30,20 L22,12 L30,20"></path>' +
                      '</svg>' +
                    '</button>'
    },

    // 模态框放置在哪一个节点中
    parentEl : 'body',


    // 焦点处理
    // ==============

    // 打开后焦点在第一个支持焦点的元素上
    autoFocus : false,

    // 关闭后焦点回到 active 的元素上
    backFocus : true,

    // 不让用户焦点放在模态框外的内容中
    trapFocus : true,


    // 模态框配置
    // =======================

    fullScreen : {
        autoStart : false,
    },

    // 设置 `touch: false` 来禁止拖拽/手指滑动
    touch : {
        vertical : true,  // 容许垂直方向拖拽
        momentum : true   // Continue movement after releasing mouse/touch when panning
    },

    // 手动初始化时的 hash 值,
    // 设为 `false` 不改变 hash 
    hash : null,

    // 自定义或者添加媒体类型
    // 例如:
    /* media : { youtube : { params : { autoplay : 0 } } } */
    media : {},

    slideShow : {
        autoStart : false,
        speed     : 4000
    },

    thumbs : {
        autoStart   : false,                  // 打开的时候展现缩略图
        hideOnClose : true,                   // 关闭动画开始时隐藏缩略图轮廓
        parentEl    : '.fancybox-container',  // Container is injected into this element
        axis        : 'y'                     // 垂直 (y) or 水平 (x) 滚动
    },

    // 使用鼠标滚轮来浏览相册
    // 设为 'auto' - 只对图片启用
    wheel : 'auto',

    // 毁掉函数
    //==========

    // 更多信息请查看 API
    // 例如:
    /* afterShow: function( instance, current ) { console.info( 'Clicked element:' ); console.info( current.opts.$orig ); } */

    onInit       : $.noop,  // 实例初始化完成

    beforeLoad   : $.noop,  // 侧栏的内容正在被加载
    afterLoad    : $.noop,  // 侧栏的内容加载完成后

    beforeShow   : $.noop,  // 打开动画开始前
    afterShow    : $.noop,  // 内容加载完成，进行动画的时候

    beforeClose  : $.noop,  // 实例准备关闭的时候，返回 false 值取消关闭
    afterClose   : $.noop,  // 实例关闭后

    onActivate   : $.noop,  // 实例激活的时候
    onDeactivate : $.noop,  // 其余实例被激活的时候


    // 交互
    // ===========

    // 使用一下选项自定义用户单击双击等事件
    // 每一个选项能够是字符串，或者有返回值的方法
    //
    // 可用的值:
    // "close" - close instance
    // "next" - move to next gallery item
    // "nextOrClose" - move to next gallery item or close if gallery has only one item
    // "toggleControls" - show/hide controls
    // "zoom" - zoom image (if loaded)
    // false - do nothing

    // 内容被点击
    clickContent : function( current, event ) {
        return current.type === 'image' ? 'zoom' : false;
    },

    // 侧边栏被点击
    clickSlide : 'close',

    // 点击模态框外的北京时
    clickOutside : 'close',

    // 同以前的两个同样，只是是双击的时候
    dblclickContent : false,
    dblclickSlide   : false,
    dblclickOutside : false,


    // 移动端事件
    // =============================================

    mobile : {
        idleTime : false,
        margin   : 0,

        clickContent : function( current, event ) {
            return current.type === 'image' ? 'toggleControls' : false;
        },
        clickSlide : function( current, event ) {
            return current.type === 'image' ? 'toggleControls' : 'close';
        },
        dblclickContent : function( current, event ) {
            return current.type === 'image' ? 'zoom' : false;
        },
        dblclickSlide : function( current, event ) {
            return current.type === 'image' ? 'zoom' : false;
        }
    },


    // 国际化
    // ============

    lang : 'en',
    i18n : {
        'en' : {
            CLOSE       : 'Close',
            NEXT        : 'Next',
            PREV        : 'Previous',
            ERROR       : 'The requested content cannot be loaded. <br/> Please try again later.',
            PLAY_START  : 'Start slideshow',
            PLAY_STOP   : 'Pause slideshow',
            FULL_SCREEN : 'Full screen',
            THUMBS      : 'Thumbnails',
            DOWNLOAD    : 'Download',
            SHARE       : 'Share',
            ZOOM        : 'Zoom'
        },
        'de' : {
            CLOSE       : 'Schliessen',
            NEXT        : 'Weiter',
            PREV        : 'Zurück',
            ERROR       : 'Die angeforderten Daten konnten nicht geladen werden. <br/> Bitte versuchen Sie es später nochmal.',
            PLAY_START  : 'Diaschau starten',
            PLAY_STOP   : 'Diaschau beenden',
            FULL_SCREEN : 'Vollbild',
            THUMBS      : 'Vorschaubilder',
            DOWNLOAD    : 'Herunterladen',
            SHARE       : 'Teilen',
            ZOOM        : 'Maßstab'
        }
    }

};
复制代码

经过传入 fancybox 方法一个对象来设置一个实例：

$("[data-fancybox]").fancybox({
	thumbs : {
		autoStart : true
	}
});
复制代码

能够经过 $.fancybox.defaults 命名空间修改 fancyBox 的默认选项：

$.fancybox.defaults.animationEffect = "fade";
复制代码

对于单独的元素能够经过 data-options 属性进行自定义。这个属性值要求JSON格式的对象：

<a data-fancybox data-options='{"caption" : "My caption", "src" : "https://codepen.io/about/", "type" : "iframe"}' href="javascript:;" class="btn">
	Open external page
</a>
复制代码

在 CodePen 上查看例子

7. API

API 提供了一系列的方法来控制 fancyBox。这些方法帮助你扩展插件，整合到其余的 web 应用中。

7.1 核心方法

操做实例的核心方法：

// 只关闭当前 active 状态或者全部的 fancyBox 实例
$.fancybox.close( true );

// 打开 fancyBox
$.fancybox.open( items, opts, index );
复制代码

经过 jQuery 将相册中的元素变为 jQuery 对象或者包含纯对象的数组，进行更多操做如建立定义点击事件。

var $links = $('.fancybox');

$links.on('click', function() {

	$.fancybox.open( $links, {
		// 自定义内容
	}, $links.index( this ) );

	return false;
});
复制代码

手动建立一组对象时，组内元素应该遵循如下规则：

{
  	src  : '' // 资源
	type : '' // 类型: image|inline|ajax|iframe|html (optional)
	opts : {} // 选项 (optional)
}
复制代码

下面是一个经过 JavaScrip t打开相册的例子：

$.fancybox.open([
	{
		src  : '1_b.jpg',
		opts : {
			caption : 'First caption'
		}
	},
	{
		src  : '2_b.jpg',
		opts : {
			caption : 'Second caption'
		}
	}
], {
	loop : false
});
复制代码

在 CodePen 上查看例子

fancyBox 容许只传一个对象。打开行内元素的例子：

$.fancybox.open({
	src  : '#hidden-content',
	type : 'inline',
	opts : {
		afterShow : function( instance, current ) {
			console.info( 'done!' );
		}
	}
});
// 译者注：行内元素以下
<div id="#hidden-content">
  <p>...content</p>
</div>
复制代码

在 CodePen 上查看例子

若是你想展现一些html文档（例如一段信息），你只须要使用很简单的一句语法。fancyBox 建议使用一个wrapper 包裹你的内容。

$.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');
复制代码

在 CodePen 上查看例子

7.2 实例的方法

你须要定义一个实例来使用实例的方法。

var instance = $.fancybox.open(
	// 内容和选项
);
复制代码

从当前 active 的实例中获取信息：

var instance = $.fancybox.getInstance();
复制代码

回调函数的第一个参数返回实例信息：

$("[data-fancybox]").fancybox({
	afterShow : function( instance, current ) {
		console.info( instance );
	}
});
复制代码

实例能够调用如下方法：

// 跳到下一个相册元素
instance.next( duration );

//跳到上一个相册元素
instance.previous( duration );

// 调到选中的相册元素
instance.jumpTo( index, duration );

// 检测当前尺寸是否小于实际尺寸
instance.isScaledDown();

// 缩放到实际尺寸
instance.scaleToActual( x, y, duration );

// 检测尺寸是否超过父元素
instance.canPan();

// 缩放适应父元素尺寸
instance.scaleToFit( duration );

// 更新滑块的内容和位置
instance.update();

// 更新侧边栏的位置， 缩放内容来适应
instance.updateSlide( slide );

// 更新 infobar 的值， 导航按钮的状态， 和展现标题
instance.updateControls( force );

// 在侧边栏中加载自定义内容
instance.setContent( slide, content );

// 在侧边栏中加载loading效果
instance.showLoading( slide );

// 从侧边栏中去除loading效果
instance.hideLoading( slide );

// 找到和把焦点放在第一个能够放置焦点的元素
instance.focus();

// 激活当前 active 的实例，显示在最前面
instance.activate();

// 关闭实例
instance.close();
复制代码

你能够这样使用：

$.fancybox.getInstance().jumpTo(1);
复制代码

或者：

$.fancybox.getInstance('jumpTo', 1);
复制代码

7.3 事件

fancyBox 支持触发如下事件：

beforeLoad   : 滑块的内容加载前
afterLoad    : 滑块内容加载后

beforeShow   : 打开动画开始前
afterShow    : 内容或者动画加载完成

beforeClose  : 实例准备关闭前，染回`false`取消关闭
afterClose   : 实例关闭后

onInit       : 实例初始化完成
onActivate   : 实例active状态
onDeactivate : 其余实例变为active状态
复制代码

事件能够做为一个对象的函数属性，该对象做为参数传入到 fancyBox 初始化方法中：

<script type="text/javascript">
	$("[data-fancybox]").fancybox({
		afterShow: function( instance, slide ) {

			// Tip: Each event passes useful information within the event object:

			// Object containing references to interface elements
			// (background, buttons, caption, etc)
			// console.info( instance.$refs );

			// Current slide options
			// console.info( slide.opts );

			// Clicked element
			// console.info( slide.opts.$orig );

			// Reference to DOM element of the slide
			// console.info( slide.$slide );

		}
	});
</script>
复制代码

每个回调函数接收两个参数 —— 当前的 fancyBox 实例和当前的相册对象（若是它们存在）。

fancyBox也支持触发全部的实例事件。为了防止和其余的脚本产生干扰，这些事件命名为.fb结尾。这些事件函数接收3个参数—事件（event），当前的 fancyBox 实例和当前的相册对象。

下面例子是绑定afterShow事件：

$(document).on('afterShow.fb', function( e, instance, slide ) {
	// Your code goes here
});
复制代码

若是你想阻止当前弹窗的关闭（例如在表单提交以后），可使用beforeClose。只须要返回false便可：

beforeClose : function( instance, current, e ) {
	if ( $('#my-field').val() == '' ) {
		return false;
	}
}
复制代码

8. 模块

fancyBox 代码被分红几个扩展核心功能的文件（模块）。你能够经过去除没必要要的模块来构建你本身的 fancyBox 版本。若是须要，每个模块有本身的.js和.css文件。

// 自定义、添加新的媒体类型
// 例如:
/* media : { youtube : { params : { autoplay : 0 } } } */
media : {},

slideShow : {
	autoStart : false,
	speed     : 4000
},

thumbs : {
	autoStart   : false,                  // 打开时显示缩略图
	hideOnClose : true,                   // Hide thumbnail grid when closing animation starts
	parentEl    : '.fancybox-container',  // Container is injected into this element
	axis        : 'y'                     // Vertical (y) or horizontal (x) scrolling
}

Example (show thumbnails on start):


复制代码

开始时展现缩略图的例子：

$('[data-fancybox="images"]').fancybox({
	thumbs : {
		autoStart : true
	}
})
复制代码

若是你查看了 fancyBox 的实例对象，你会发现一些key的值是大写的 —— 他们关联着其余模块的对象。固然，你也会发现 fancyBox 使用和 jQuery 一直的前缀 $ 。

下面例子为如何拿到缩略图栅格元素：

$.fancybox.getInstance().Thumbs.$grid
复制代码

下面例子为如何调用切换缩略图的方法：

$.fancybox.getInstance().Thumbs.toggle();
复制代码

可以使用的方法列表：

Thumbs.focus()
Thumbs.update();
Thumbs.hide();
Thumbs.show();
Thumbs.toggle();

FullScreen.request( elem );
FullScreen.exit();
FullScreen.toggle( elem );
FullScreen.isFullscreen();
FullScreen.enabled();

SlideShow.start();
SlideShow.stop();
SlideShow.toggle();
复制代码

若是你想禁止 hash 模块，使用下面代码片断（引用 JS 以后）：

$.fancybox.defaults.hash = false;
复制代码

9. FAQ

1. 打开、关闭致使固定定位的元素移动

在固定定位的元素的class中加入compensate-for-scrollbar。例子为使用Bootstrap的navbar组件：

<nav class="navbar navbar-inverse navbar-fixed-top compensate-for-scrollbar">
	<div class="container">
		..
	</div>
</nav>
复制代码

在 CodePen 上查看例子

上个例子中，脚本会测量滚动条的宽度，建立compensate-for-scrollbar样式并将宽度值复制到该样式的margin-right属性。所以，若是你的元素宽度设置为width:100%，你应该同时使用left和right定位，例如：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
复制代码

2. 如何自定义标题

你可使用caption选项，它接收一个函数，而且被组内的每一个元素调用。例子为增长图片下载连接：

$( '[data-fancybox="images"]' ).fancybox({
    caption : function( instance, item ) {
        var caption = $(this).data('caption') || '';

        if ( item.type === 'image' ) {
            caption = (caption.length ? caption + '<br />' : '') + '<a href="' + item.src + '">Download image</a>' ;
        }

        return caption;
    }
});
复制代码

在 CodePen 上查看例子

在标题右边增长当前图片的序号和图片总数：

$( '[data-fancybox="images"]' ).fancybox({
    infobar : false,
    caption : function( instance, item ) {
        var caption = $(this).data('caption') || '';

        return ( caption.length ? caption + '<br />' : '' ) + 'Image <span data-fancybox-index></span> of <span data-fancybox-count></span>';
    }
});
复制代码

在 CodePen 上查看例子

在caption方法里面，this指向被点击的元素。例子为使用不一样的标题：

$( '[data-fancybox]' ).fancybox({
	caption : function( instance, item ) {
		return $(this).find('figcaption').html();
	}
});
复制代码

在 CodePen 上查看例子

3. 如何在tool上建立自定义按钮

建立可重复使用的按钮例子：

// 建立按钮模板
$.fancybox.defaults.btnTpl.fb = '<button data-fancybox-fb class="fancybox-button fancybox-button--fb" title="Facebook">' +
    '<svg viewBox="0 0 24 24">' +
        '<path d="M22.676 0H1.324C.594 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294h-3.13v-3.62h3.13V8.41c0-3.1 1.894-4.785 4.66-4.785 1.324 0 2.463.097 2.795.14v3.24h-1.92c-1.5 0-1.793.722-1.793 1.772v2.31h3.584l-.465 3.63h-3.12V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .594 23.408 0 22.676 0"/>' +
    '</svg>' +
'</button>';

// 使用时间代理使按钮可点击
$('body').on('click', '[data-fancybox-fb]', function() {
  window.open("https://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent(window.location.href)+"&t="+encodeURIComponent(document.title), '','left=0,top=0,width=600,height=300,menubar=no,toolbar=no,resizable=yes,scrollbars=yes');
});

// 自定义按钮
$( '[data-fancybox="images"]' ).fancybox({
  buttons : [
    'fb',
    'close'
  ]
});
复制代码

在 CodePen 上查看例子

4. 如何重置缩略图栅格的位置

这里没有 JS 选项去改变缩略图栅格的位置，可是 fancyBox 容许你使用 CSS 来改变每一个块元素的位置或者尺寸（例如：内容区域，标题或者缩略图栅格）。这使你很自由的改变弹框窗口的外观和样式。

在 CodePen 上查看例子

5. 如何禁止touch操做

当你想内容可选择或者可点击，有两个选项：

设置touch:false彻底禁止 touch 操做
添加data-selectable="true"属性到你的 html 元素

在 CodePen 上查看例子

相关文章

相关标签/搜索

DocFX文档翻译

Chromium中文文档

Thymeleaf 教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公众号

欢迎关注本站公众号,获取更多信息

相关文章

>>更多相关文章<<