软件
产品
译文永久地址：kangkai124.github.io/fancybox/ 说明：本文档仅供参考，更新不及时请查看官方文档
fancyBox 是一个 JavaScript 库，它以优雅的方式展示图片，视频和一些 html 内容。它包含你所期望的一切特性 —— 支持触屏，响应式和高度自定义。
推荐 jQuery 3+，但是 fancyBox 仍支持 jQery 1.9.1+ 和 jQuery 2+ 。
注意 如果你在图片缩放时遇到了问题，请升级 jQuery 到最近版本（至少v3.2.1）。
fancyBox 支持触屏操作，而且支持缩放等手势操作。在移动端和PC端上都十分合适。
fancyBox 已经在下列浏览器中测试：
可以在 html 文档中引入.css和.js来使用fancyBox，确保在这之前引入了 jQuery 库。下面是使用fancyBox的一个基本的HTML模板：
<!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>复制代码注意 要先引入jQuery 如果页面中已经引入过jQuery，不能再次引入 不要同时引入 fancybox.js 和 fancybox.min.js 一些方法（ajax，iframes 等）必须在一个web服务器上才可以正常运行，在浏览器打开一个本地文件是无法正常工作的
可以在 GIthub 下载最新的版本。 https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Ffancyapps%2Ffancybox
或者直接引用 cdnjs —cdnjs.com/libraries/f…。
fancyBox 还可以通多 npm 和 Bower安装。
# NPMnpm install @fancyapps/fancybox --save # Bowerbower install fancybox --save复制代码最基本的用法是通过添加 data-fancybox 属性到一个超链接标签。标题可以通过 data-capiton 添加。例如：
<a href="image.jpg" data-fancybox data-caption="My caption"> <img src="thumbnail.jpg" alt="" /></a>复制代码在 CodePen 上查看例子
这种方式使用默认的配置，可以查看选项进行自定义配置，或者使用data-options属性。
使用 jQuery 选择器选择一个元素，然后调用fancybox方法：
<script type="text/javascript"> $("[data-fancybox]").fancybox({ // Options will go here });</script>复制代码在 CodePen 上查看例子
使用这种方式，只有被选中的元素才可以触发点击事件。
为了可以现在或之后存在的元素都可以触发点击事件，使用selector选项。例如：
$().fancybox({ selector : '[data-fancybox="images"]', loop : true});复制代码在 CodePen 上查看例子
fancyBox 允许使用 JavaScrip t以任意形式触发，因此不必需要通过某一个元素触发。下面例子为展示一段简单的信息：
$.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');复制代码在 CodePen 上查看例子
通过 API 查看更多的信息和例子。
如果你有一组元素，组内元素使用相同的 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>复制代码使用 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 上查看例子
对于行内元素，你需要创建一个隐藏的元素并添加独特的 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来自定义样式。
想要通过 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 上查看例子
如果内容可以展示在页面，并且放在 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 上查看例子
支持的网站可以展示在 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="Edited">balloon rides at dawn ✨?<br>was such a magical experience floating over napa valley as the golden light hit the hills.<br><a href="https://www.instagram.com/jamesrelfdyer/">@jamesrelfdyer</a></span>"> Instagram photo</a>复制代码在 CodePen 上查看例子
通过 CSS 调整视频的显示大小：
.fancybox-slide--video .fancybox-content { width : 800px; height : 600px; max-width : 80%; max-height : 80%;}复制代码在 CodePen 上查看例子
显然，你可以选择你喜欢的尺寸。部分未支持的画面比例，可以参照这个方法。
通过 url 中的参数控制视频
<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk&autoplay=1&rel=0&controls=0&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 上查看例子
默认选项值快速参考：
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> / <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 上查看例子
API 提供了一系列的方法来控制 fancyBox。这些方法帮助你扩展插件，整合到其他的 web 应用中。
操作实例的核心方法：
// 只关闭当前 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 上查看例子
你需要定义一个实例来使用实例的方法。
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);复制代码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; }}复制代码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;复制代码在固定定位的元素的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;}复制代码你可以使用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 上查看例子
创建可重复使用的按钮例子：
// 创建按钮模板$.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 上查看例子
这里没有 JS 选项去改变缩略图栅格的位置，但是 fancyBox 允许你使用 CSS 来改变每个块元素的位置或者尺寸（例如：内容区域，标题或者缩略图栅格）。这使你很自由的改变弹框窗口的外观和样式。
在 CodePen 上查看例子
当你想内容可选择或者可点击，有两个选项：
touch:false完全禁止 touch 操作data-selectable="true"属性到你的 html 元素在 CodePen 上查看例子
免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删
技术文档
推荐好文
155-2731-8020
