介绍

开始使用fancybox，它可能是世界上最流行的灯箱脚本。

依赖项

首选 jQuery 3+，但 fancybox 可与 jQuery 1.9.1+ 和 jQuery 2+ 一起使用

兼容性

fancybox 包括对触摸手势的支持，甚至支持缩放手势。它非常适合移动和桌面浏览器。

fancybox 已经在以下浏览器/设备中进行了测试：

  • 铬合金
  • 火狐
  • IE10/11
  • 边缘
  • 苹果浏览器
  • 安卓7.0平板

设置

.css您可以通过链接和 .js文件到您的 html 文件 来安装 fancybox 。确保您还加载了 jQuery 库。以下是用作示例的基本 HTML 模板： 

<!DOCTYPE html>
<html>
<头部>
	<meta charset="utf-8">
	<title>我的页面</title>

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

	<!-- 你的 HTML 内容放在这里 -->

	<!-- JS -->
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script src="jquery.fancybox.min.js"></script>
</正文>
</html>

下载花式框

在GitHub 上 下载最新版本的 fancybox 。
或者直接链接到 cdnjs 上的 fancybox 文件 - https://cdnjs.com/libraries/fancybox。

包管理器

fancybox 也可以在 npm 和 Bower 上使用。 

# NPM
npm install @fancyapps/fancybox --save

# Bower
bower install fancybox --save

重要的

  • 确保在 fancybox JS 文件之前添加 jQuery 库
  • 如果您的页面上已经有 jQuery，则不应第二次包含它
  • 不要同时包含 fancybox.js 和 fancybox.min.js 文件
  • 当您直接在浏览器上打开本地文件时，某些功能（ajax、iframe 等）将不起作用，代码必须在 Web 服务器上运行

如何使用

用数据属性初始化

使用 fancybox 最基本的方法是 data-fancybox给你的元素添加属性。这将自动绑定将启动 fancybox 的单击事件。使用 href或 data-src属性来指定内容的来源。例子： 

<a href="image.jpg" data-fancybox data-caption="单张图片标题">
	<img src="thumbnail.jpg" alt="" />
</a>

在 CodePen 上查看演示

如果您有一组项目，则可 data-fancybox以为每个项目使用相同的属性值来创建画廊。每个组都应该有一个独特的价值。例子： 

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

<a href="image_2.jpg" data-fancybox="gallery" data-caption="Caption #2">
	<img src="thumbnail_2.jpg" alt="" />
</a>

在 CodePen 上查看演示

如果您选择此方法，将应用默认设置。有关如何通过更改默认值、使用 属性或使用 JavaScript 进行初始化的示例，请参阅 选项部分。 data-options

信息 有时您有多个链接指向同一个来源，这会在图库中创建重复项。为避免这种情况，只需使用 与其他链接data-fancybox-trigger的属性相同的值 即可。data-fancybox可选地，使用 data-fancybox-index属性来指定起始元素的索引： 

<a data-fancybox-trigger="gallery" href="javascript:;">
    <img src="thumbnail_1.jpg" alt="" />
</a>

在 CodePen 上查看演示

用 JavaScript 初始化

使用 jQuery 选择器选择您的元素（您可以使用任何有效的选择器）并调用该 fancybox方法： 

$('[data-fancybox="gallery"]').fancybox({
	// Options will go here
});

在 CodePen 上查看演示

信息 有时您可能需要将 fancybox 绑定到动态添加的元素。使用 selector选项为现在或将来存在的元素附加单击事件侦听器。所有选定的项目将在图库中自动分组。例子： 

$().fancybox({
    selector : '.imglist a:visible'
});

在 CodePen 上查看演示

与 Javascript 一起使用

您还可以以编程方式打开和关闭fancybox。以下是几个示例，请访问 API部分以获取更多信息和演示。

显示简单消息： 

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

在 CodePen 上查看演示

显示 iframe 页面： 

$.fancybox.open({
	src  : 'link-to-your-page.html',
	type : 'iframe',
	opts : {
		afterShow : function( instance, current ) {
			console.info( 'done!' );
		}
	}
});

在 CodePen 上查看演示

重要的

fancybox 尝试根据给定的 url 自动检测内容的类型。如果无法检测到，也可以使用 data-type属性（或 type选项）手动设置类型。例子： 

<a href="images.php?id=123" data-type="image" data-caption="Caption">
	显示图片
</a>

媒体类型

fancybox 旨在显示图像、视频、iframe 和任何 HTML 内容。为了您的方便，内置了对内联内容和 ajax 的支持。

图片

使用 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 上查看演示

您还可以使用这些 width和 height属性来控制图像的大小。这可用于使图像在视网膜显示器上看起来更清晰。例子： 

$('[data-fancybox="images"]').fancybox({
    afterLoad : function(instance, current) {
        var pixelRatio = window.devicePixelRatio || 1;

        if ( pixelRatio > 1.5 ) {
            current.width  = current.width  / pixelRatio;
            current.height = current.height / pixelRatio;
        }
    }
});

在 CodePen 上查看演示

fancybox 支持“srcset”，因此它可以根据视口宽度显示不同的图像。您可以使用它来缩短移动用户的下载时间，并随着时间的推移节省带宽。例子： 

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

在 CodePen 上查看演示

也可以通过右键单击来保护图像不被下载。虽然这并不能保护真正坚定的用户，但它应该阻止绝大多数人窃取您的文件。（可选）将水印放在图像上。 

$('[data-fancybox]').fancybox({
	protect: true
});

在 CodePen 上查看演示

视频

只需提供页面 URL，YouTube 和 Vimeo 视频就可以与 fancybox 一起使用。直接链接到 MP4 视频或使用触发元素显示隐藏<video>元素。

使用 data-width和 data-height属性来自定义视频尺寸和 data-ratio宽高比。 

<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 data-width="640" data-height="360" href="video.mp4">
    Direct link to MP4 video
</a>

<a data-fancybox href="#myVideo">
    HTML5 video element
</a>

<video width="640" height="320" controls id="myVideo" style="display:none;">
    <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4">
    <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm" type="video/webm">
    <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.ogv" type="video/ogg">
    Your browser doesn't support HTML5 video tag.
</video>

在 CodePen 上查看演示

通过 URL 参数控制 YouTube 和 Vimeo 视频： 

<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 上查看演示

框架

如果您需要显示其他页面的内容，请在链接中添加data-fancybox和data-type="iframe" 属性。这将创建<iframe>允许在模式中嵌入整个 Web 文档的元素。 

<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 file 
</a>

在 CodePen 上查看演示

如果您没有禁用 iframe 预加载（使用 preload选项），脚本将尝试计算内容尺寸并调整宽度/高度<iframe>以适应其中的内容。请记住，由于 同源政策，存在一些限制。

此示例将禁用 iframe 预加载，并将在 iframe 旁边显示小的关闭按钮而不是工具栏： 

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

在 CodePen 上查看演示

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 内部访问和控制父窗口中的 fancybox： 

// Close current fancybox instance
parent.jQuery.fancybox.getInstance().close();

// Adjust iframe height according to the contents
parent.jQuery.fancybox.getInstance().update();

排队

fancybox 可用于在页面上显示任何 HTML 元素。首先，创建一个具有唯一 ID 的隐藏元素： 

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

然后只需创建一个链接，该链接的 data-src属性与您要打开的元素的 ID 匹配（前面有井号 (#)；在本例中为 - #hidden-content）： 

<a data-fancybox data-src="#hidden-content" href="javascript:;">
	Trigger the fancybox
</a>

在 CodePen 上查看演示

该脚本将附加小的关闭按钮（如果您没有被禁用 smallBtn:false）并且不会应用除居中之外的任何样式。因此，您可以使用 CSS 轻松设置自定义尺寸。

信息如有必要，您可以通过 在 CodePen 上添加额外的包装元素和一些 CSS 视图演示来使您的元素（以及类似的任何其他 html 内容）可滚动。

阿贾克斯

要通过 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 上查看演示

选项

源中定义的所有默认选项的快速参考： 

变量默认值 = {
  // 关闭现有的 modals
  // 如果不需要堆叠多个实例，则将此设置为 false
  关闭现有：假，

  // 启用无限画廊导航
  循环：假，

  // 幻灯片之间的水平空间
  排水沟：50，

  // 启用键盘导航
  键盘：是的，

  // 应该允许标题与内容重叠
  preventCaptionOverlap：真，

  // 应该在屏幕边缘显示导航箭头
  箭头：是的，

  // 应该在左上角显示计数器
  信息栏：是的，

  // 应该在内容上显示关闭按钮（使用 `btnTpl.smallBtn` 模板）
  // 可以是真、假、“自动”
  // 如果 "auto" - 将自动为 "html"、"inline" 或 "ajax" 项目启用
  smallBtn: "自动",

  // 应该显示工具栏（顶部的按钮）
  // 可以是真、假、“自动”
  // 如果 "auto" - 如果启用 "smallBtn" 将自动隐藏
  工具栏：“自动”，

  // 右上角应该出现什么按钮。
  // 按钮将使用 `btnTpl` 选项中的模板创建
  // 它们将被放入工具栏（class="fancybox-toolbar"` 元素）
  纽扣： [
    “飞涨”，
    //“分享”，
    “幻灯片”，
    //“全屏”，
    //“下载”，
    “拇指”，
    “关”
  ],

  // 以秒为单位检测“空闲”时间
  空闲时间：3，

  // 禁用右键单击并对图像使用简单的图像保护
  保护：假，

  // 使内容“模态”的快捷方式 - 禁用键盘导航、隐藏按钮等
  模态：假，

  图片： {
    // 等待图片加载后显示
    // true - 等待图像加载然后显示；
    // false - 显示缩略图并在顶部加载全尺寸图像，
    // 需要预定义的图像尺寸（`data-width` 和 `data-height` 属性）
    预载：假
  },

  阿贾克斯：{
    // 包含 ajax 请求设置的对象
    设置：{
      // 这有助于表明请求来自模态
      //随意更改命名
      数据： {
        花式盒子：真
      }
    }
  },

  内嵌框架：{
    // iframe 模板
    tpl：
      '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" allowfullscreen allow="autoplay; fullscreen" src=""></iframe>',

    // 在显示之前预加载 iframe
    // 这允许计算 iframe 内容的宽度和高度
    //（注意：由于“同源策略”，无法获取跨域数据）。
    预载：真，

    // 为 iframe 包装元素自定义 CSS 样式
    // 您可以使用它来设置自定义 iframe 尺寸
    CSS：{}，

    // iframe 标签属性
    属性：{
      滚动：“自动”
    }
  },

  // 仅适用于 HTML5 视频
  视频： {
    tpl：
      '<video class="fancybox-video" 控件 controlsList="nodownload" poster="{{poster}}">' +
      '<source src="{{src}}" type="{{format}}" />' +
      '抱歉，您的浏览器不支持嵌入视频，<a href="{{src}}">下载</a>并用您最喜欢的视频播放器观看！' +
      "</video>",
    format: "", // 自定义视频格式
    自动启动：真
  },

  // 如果无法自动检测到默认内容类型
  默认类型：“图像”，

  // 打开/关闭动画类型
  // 可能的值：
  // false - 禁用
  // “缩放” - 从/到缩略图缩放图像
  // “褪色”
  //“放大缩小”
  //
  动画效果：“缩放”，

  // 打开/关闭动画的持续时间（毫秒）
  动画时长：366，

  // 缩放时图像是否应该改变不透明度
  // 如果 opacity 为“auto”，那么如果图像和缩略图具有不同的纵横比，那么 opacity 将被改变
  zoomOpacity: "自动",

  // 幻灯片之间的过渡效果
  //
  // 可能的值：
  // false - 禁用
  // “褪色'
  // “滑动'
  //“圆形”
  // “管子'
  //“放大缩小”
  //“旋转”
  //
  过渡效果：“淡入淡出”，

  // 过渡动画的持续时间（毫秒）
  过渡持续时间：366，

  // 幻灯片元素的自定义 CSS 类
  幻灯片类：“”，

  // 用于布局的自定义 CSS 类
  基类：“”，

  // 布局的基本模板
  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"><div class=""fancybox-caption__body"></div></div>' +
    '</div>' +
    '</div>',

  // 加载指标模板
  spinnerTpl: '<div class="fancybox-loading"></div>',

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

  btnTpl：{
    下载：
      '<a 下载数据-fancybox-download class="fancybox-button fancybox-button--download" title="{{DOWNLOAD}}" href="javascript:;">' +
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.62 17.09V19H5.38v-1.91zm-2.97-6.96L17 11.45 l-5 4.87-5-4.87 1.36-1.32 2.68 2.64V5h1.92v7.77z"/></svg>' +
      "</a>",

    飞涨：
      '<button data-fancybox-zoom class="fancybox-button fancybox-button--zoom" title="{{ZOOM}}">' +
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.7 17.3l-3-3a5.9 5.9 0 0 0- .6-7.6 5.9 5.9 0 0 0-8.4 0 5.9 5.9 0 0 0 0 8.4 5.9 5.9 0 0 0 7.7.7l3 3a1 1 0 0 0 1.3 0c.4-.5.4-1 0-1.5zM8.1 13.8a4 4 0 0 1 0-5.7 4 4 0 0 1 5.7 0 4 4 0 0 1 0 5.7 4 4 0 0 1-5.7 0z"/></svg>' +
      "</按钮>",

    关：
      '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="{{CLOSE}}">' +
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 10.6L6.6 5.2 5.2 6.6l5.4 5.4-5.4 5.4 1.4 1.4 5.4-5.4 5.4 5.4 1.4-1.4-5.4-5.4 5.4-5.4-1.4-1.4-5.4 5.4z"/></svg>' +
      "</按钮>",

    // 箭头
    左箭头：
      '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}">' +
      '<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.28 15.7l-1.34 1.37L5 12l4.94- 5.07 1.34 1.38-2.68 2.72H19v1.94H8.6z"/></svg></div>' +
      "</按钮>",

    右箭头：
      '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}">' +
      '<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.4 12.97l-2.68 2.72 1.34 1.38L19 12l- 4.94-5.07-1.34 1.38 2.68 2.72H5v1.94z"/></svg></div>' +
      "</按钮>",

    // 默认情况下，这个小的关闭按钮将附加到您的 html/inline/ajax 内容中，
    // 如果 "smallBtn" 选项没有设置为 false
    小Btn：
      '<button type="button" data-fancybox-close class="fancybox-button fancybox-close-small" title="{{CLOSE}}">' +
      '<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24"><path d="M13 12l5-5-1-1-5 5 -5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"/></svg>' +
      "</按钮>"
  },

  // 容器被注入到这个元素中
  parentEl：“身体”，

  // 隐藏浏览器垂直滚动条；使用风险自负
  隐藏滚动条：真，

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

  // 尝试在打开后聚焦第一个可聚焦的元素
  自动对焦：真，

  // 关闭后将焦点放回活动元素
  后焦：是的，

  // 不要让用户关注模态内容之外的元素
  陷阱焦点：真的，

  // 模块特定选项
  // ========================

  全屏： {
    自动启动：假
  },

  // 设置 `touch: false` 以禁用平移/滑动
  触碰： {
    vertical: true, // 允许垂直拖动内容
    动量：真//平移时释放鼠标/触摸后继续移动
  },

  // 手动初始化时的哈希值，
  // 设置 `false` 以禁用哈希更改
  哈希：空，

  // 自定义或添加新的媒体类型
  // 例子：
  /*
    媒体 ： {
      YouTube ： {
        参数：{
          自动播放：0
        }
      }
    }
  */
  媒体： {}，

  幻灯片：{
    自动启动：假，
    速度：3000
  },

  大拇指：{
    autoStart: false, // 打开时显示缩略图
    hideOnClose: true, // 关闭动画开始时隐藏缩略图网格
    parentEl: ".fancybox-container", // 容器被注入到这个元素中
    axis: "y" // 垂直 (y) 或水平 (x) 滚动
  },

  // 使用鼠标滚轮导航画廊
  // 如果 'auto' - 仅对图像启用
  车轮：“汽车”，

  // 回调
  //===========

  // 查看文档/API/事件了解更多信息
  // 例子：
  /*
    afterShow：函数（实例，当前）{
      console.info('点击的元素：');
      console.info(current.opts.$orig);
    }
  */

  onInit: $.noop, // 当实例已经初始化

  beforeLoad: $.noop, // 在幻灯片的内容被加载之前
  afterLoad: $.noop, // 当幻灯片的内容完成加载时

  beforeShow: $.noop, // 打开动画开始之前
  afterShow: $.noop, // 当内容完成加载和动画

  beforeClose: $.noop, // 在实例尝试关闭之前。返回 false 取消关闭。
  afterClose: $.noop, // 实例关闭后

  onActivate: $.noop, // 当实例被带到前面时
  onDeactivate: $.noop, // 当其他实例被激活时

  // 相互作用
  // ============

  // 使用下面的选项来自定义用户点击或双击fancyBox区域时采取的行动，
  // 每个选项都可以是返回值的字符串或方法。
  //
  // 可能的值：
  // "close" - 关闭实例
  // “下一个” - 移动到下一个画廊项目
  // "nextOrClose" - 移动到下一个画廊项目，如果画廊只有一个项目，则关闭
  // "toggleControls" - 显示/隐藏控件
  //“缩放” - 缩放图像（如果加载）
  // false - 什么都不做

  //点击内容
  点击内容：功能（当前，事件）{
    返回 current.type === "image" ？“缩放”：错误；
  },

  //点击幻灯片
  clickSlide: "关闭",

  // 点击背景（背景）元素；
  // 如果你没有改变布局，那么很可能你需要使用 `clickSlide` 选项
  clickOutside: "关闭",

  // 与前两个相同，但用于双击
  dblclick内容：假，
  dblclickSlide：假，
  dblclickOutside：假，

  // 检测到移动设备时的自定义选项
  // ==============================================

  移动的： {
    防止标题重叠：假，
    空闲时间：假，
    点击内容：功能（当前，事件）{
      返回 current.type === "image" ？“切换控制”：假；
    },
    clickSlide：函数（当前，事件）{
      返回 current.type === "image" ？“切换控制”：“关闭”；
    },
    dblclickContent：函数（当前，事件）{
      返回 current.type === "image" ？“缩放”：错误；
    },
    dblclickSlide：函数（当前，事件）{
      返回 current.type === "image" ？“缩放”：错误；
    }
  },

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

  朗：“恩”，
  i18n：{
    zh: {
      关闭：“关闭”，
      下一个：“下一个”，
      上一条：“上一条”，
      ERROR: "无法加载请求的内容。<br/>请稍后再试。",
      PLAY_START: "开始幻灯片放映",
      PLAY_STOP: "暂停幻灯片",
      FULL_SCREEN: "全屏",
      拇指：“缩略图”，
      下载：“下载”，
      分享：“分享”，
      缩放：“缩放”
    },
    德：{
      关闭：“施利森”，
      下一个：“维特”，
      下一条：《祖鲁克》，
      错误：“Die angeforderten Daten konnten nicht geladen werden。<br/> Bitte versuchen Sie es später nochmal。”,
      PLAY_START: "Diaschau starten",
      PLAY_STOP: "Diaschau beden",
      FULL_SCREEN: "Vollbild",
      大拇指：“Vorschaubilder”，
      下载：“Herunterladen”，
      分享：“泰伦”，
      缩放：“Maßstab”
    }
  }
};

通过将有效对象传递给fancybox()方法来设置实例选项： 

$('[data-fancybox="gallery"]').fancybox({
	thumbs : {
		autoStart : true
	}
});

插件选项/默认值在 $.fancybox.defaults命名空间中公开，因此您可以轻松地全局调整它们： 

$.fancybox.defaults.animationEffect = "fade";

data-options可以通过向元素添加属性来 单独设置每个元素的自定义选项 。此属性应包含格式正确的 JSON 对象（请记住，字符串应包含在双引号中）。

也可以使用所选选项的参数化名称快速设置任何 选项，例如 ： animationEffectdata-animation-effect

<a data-fancybox data-options='{"caption" : "My caption", "src" : "https://codepen.io/about/", "type" : "iframe"}' href="javascript:;" class="btn btn-primary">
    Example #1
</a>

<a data-fancybox data-animation-effect="false" href="https://source.unsplash.com/0JYgd2QuMfw/1500x1000" class="btn btn-primary">
    Example #2
</a>

在 CodePen 上查看演示

API

fancybox API 提供了几个方法来控制 fancybox。这使您能够扩展插件并将其与其他 Web 应用程序组件集成。

核心方法

核心方法是影响/处理实例的方法： 

// Start new fancybox instance
$.fancybox.open( items, opts, index );

// Get refrence to currently active fancybox instance
$.fancybox.getInstance();

// Close currently active fancybox instance (pass `true` to close all instances) 
$.fancybox.close();

// Close all instances and unbind all events
$.fancybox.destroy();

启动fancybox

手动创建组对象时，每个项目都应遵循以下模式： 

{
	src  : '' // Source of the content
	type : '' // Content type: image|inline|ajax|iframe|html (optional)
	opts : {} // Object containing item options (optional)
}

以编程方式打开图片库的示例： 

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

在 CodePen 上查看演示

也可以只传递一个对象。打开内联内容的示例： 

$.fancybox.open({
	src  : '#hidden-content',
	type : 'inline',
	opts : {
		afterShow : function( instance, current ) {
			console.info( 'done!' );
		}
	}
});

在 CodePen 上查看演示

如果您希望快速显示一些 html 内容（例如，一条消息），那么您可以使用更简单的语法。不要忘记在您的内容周围使用包装元素。 

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

在 CodePen 上查看演示

组项目也可以是 jQuery 对象的集合。例如，这可以用于显示一组内联元素： 

$('#test').on('click', function() {
  $.fancybox.open( $('.inline-gallery'), {
    touch: false
  });
});

在 CodePen 上查看演示

实例方法

为了使用这些方法，您需要一个插件对象的实例。有 3 种常用方法来获取参考。

1）使用API​​方法获取当前活动的实例： 

var instance = $.fancybox.getInstance();

2）以编程方式启动fancybox时： 

var instance = $.fancybox.open(
	// Your content and options
);

3) 在回调中 - 第一个参数始终是对当前实例的引用： 

$('[data-fancybox="gallery"]').fancybox({
	afterShow : function( instance, current ) {
		console.info( instance );
	}
});

一旦您引用了 fancybox 实例，就可以使用以下方法： 

// Go to next gallery item
instance.next( duration );

// Go to previous gallery item
instance.previous( duration );

// Switch to selected gallery item
instance.jumpTo( index, duration );

// Check if current image dimensions are smaller than actual
instance.isScaledDown();

// Scale image to the actual size of the image
instance.scaleToActual( x, y, duration );

// Check if image dimensions exceed parent element
instance.canPan();

// Scale image to fit inside parent element
instance.scaleToFit( duration );

// Update position and content of all slides
instance.update();

// Update slide position and scale content to fit
instance.updateSlide( slide );

// Update infobar values, navigation button states and reveal caption
instance.updateControls( force );

// Load custom content into the slide
instance.setContent( slide, content );

// Show loading icon inside the slide
instance.showLoading( slide );

// Remove loading icon from the slide
instance.hideLoading( slide );

// Try to find and focus on the first focusable element
instance.focus();

// Activates current instance, brings it to the front
instance.activate();

// Close instance
instance.close();

你也可以这样做： 

$.fancybox.getInstance().jumpTo(1);

或者简单地说： 

$.fancybox.getInstance('jumpTo', 1);

活动

fancybox 触发了几个事件： 

beforeLoad   : Before the content of a slide is being loaded
afterLoad    : When the content of a slide is done loading

beforeShow   : Before open animation starts
afterShow    : When content is done loading and animating

beforeClose  : Before the instance attempts to close. Return false to cancel the close.
afterClose   : After instance has been closed

onInit       : When instance has been initialized
onActivate   : When instance is brought to front
onDeactivate : When other instance has been activated

事件回调可以设置为传递给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 实例和当前的画廊对象（如果存在）。

也可以为所有实例附加事件处理程序。为了防止干扰其他脚本，这些事件已命名为.fb. 这些处理程序接收 3 个参数 - 事件、当前 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文件。

一些模块可以通过程序进行定制和控制。所有可能选项的列表： 

fullScreen: {
  autoStart: false
},

touch : {
  vertical : true,  // Allow to drag content vertically
  momentum : true   // Continuous movement when panning
},

// Hash value when initializing manually,
// set `false` to disable hash change
hash : null,

// Customize or add new media types
// Example:
/*
media : {
  youtube : {
    params : {
      autoplay : 0
    }
  }
}
*/
media : {},

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

thumbs : {
  autoStart   : false,                  // Display thumbnails on opening
  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
},

share: {
  url: function(instance, item) {
    return (
      (!instance.currentHash && !(item.type === "inline" || item.type === "html") ? item.origSrc || item.src : false) || window.location
    );
  },
  tpl:
    '<div class="fancybox-share">' +
    "<h1>{{SHARE}}</h1>" +
    "<p>" +
    '<a class="fancybox-share__button fancybox-share__button--fb" href="https://www.facebook.com/sharer/sharer.php?u={{url}}">' +
    '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m287 456v-299c0-21 6-35 35-35h38v-63c-7-1-29-3-55-3-54 0-91 33-91 94v306m143-254h-205v72h196" /></svg>' +
    "<span>Facebook</span>" +
    "</a>" +
    '<a class="fancybox-share__button fancybox-share__button--tw" href="https://twitter.com/intent/tweet?url={{url}}&text={{descr}}">' +
    '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m456 133c-14 7-31 11-47 13 17-10 30-27 37-46-15 10-34 16-52 20-61-62-157-7-141 75-68-3-129-35-169-85-22 37-11 86 26 109-13 0-26-4-37-9 0 39 28 72 65 80-12 3-25 4-37 2 10 33 41 57 77 57-42 30-77 38-122 34 170 111 378-32 359-208 16-11 30-25 41-42z" /></svg>' +
    "<span>Twitter</span>" +
    "</a>" +
    '<a class="fancybox-share__button fancybox-share__button--pt" href="https://www.pinterest.com/pin/create/button/?url={{url}}&description={{descr}}&media={{media}}">' +
    '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m265 56c-109 0-164 78-164 144 0 39 15 74 47 87 5 2 10 0 12-5l4-19c2-6 1-8-3-13-9-11-15-25-15-45 0-58 43-110 113-110 62 0 96 38 96 88 0 67-30 122-73 122-24 0-42-19-36-44 6-29 20-60 20-81 0-19-10-35-31-35-25 0-44 26-44 60 0 21 7 36 7 36l-30 125c-8 37-1 83 0 87 0 3 4 4 5 2 2-3 32-39 42-75l16-64c8 16 31 29 56 29 74 0 124-67 124-157 0-69-58-132-146-132z" fill="#fff"/></svg>' +
    "<span>Pinterest</span>" +
    "</a>" +
    "</p>" +
    '<p><input class="fancybox-share__input" type="text" value="{{url_raw}}" /></p>' +
    "</div>"
}
几个例子

在开始时显示缩略图： 

$('[data-fancybox="images"]').fancybox({
	thumbs : {
		autoStart : true
	}
});

在 CodePen 上查看演示

如果显示隐藏的视频元素，请自定义分享网址： 

$('[data-fancybox="test-share-url"]').fancybox({
    buttons : ['share', 'close'],
    hash : false,
    share : {
        url : function( instance, item ) {
            if (item.type === 'inline' && item.contentType === 'video') {
                return item.$content.find('source:first').attr('src');
            }

            return item.src;
        }
    }
});

在 CodePen 上查看演示

如果您检查 fancybox 实例对象，您会发现相同的键被大写 - 这些是每个模块对象的引用。此外，您会注意到 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();

如果您希望禁用哈希模块，请使用此代码段（包含 JS 文件后）： 

$.fancybox.defaults.hash = false;

常问问题

#1打开/关闭导致固定元素跳跃

只需将compensate-for-scrollbarCSS 类添加到您的固定定位元素。使用 Bootstrap 导航栏组件的示例： 

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

在 CodePen 上查看演示

该脚本测量滚动条的宽度并创建 compensate-for-scrollbar使用该 margin-right属性值的 CSS 类。因此，如果你的元素有 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如何在工具栏中创建自定义按钮

创建可重用按钮的示例： 

// Create template for the button
$.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>';

// Make button clickable using event delegation
$('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');
});

// Customize buttons
$( '[data-fancybox="images"]' ).fancybox({
    buttons : [
        'fb',
        'close'
    ]
});

在 CodePen 上查看演示

#4如何重新定位缩略图网格

目前没有 JS 选项来更改缩略图网格位置。但fancybox 的设计目的是让您可以使用CSS 更改每个块的位置或尺寸（例如，内容区域、标题或缩略图网格）。如果需要，这使您可以自由地完全更改模式窗口的外观。 在 CodePen 上查看演示

#5如何禁用触摸手势/滑动

当您想让您的内容可选择或可点击时，您有两种选择：

  • 通过设置完全禁用触摸手势 touch:false
  • 将 data-selectable="true"属性添加到您的 html 元素

在 CodePen 上查看演示

#6 Slider/carousel 添加克隆的重复项

如果您将fancybox 与滑块/轮播脚本相结合，并且该脚本会克隆项目以启用无限导航，那么重复的项目将出现在库中。为避免这种情况 - 1) 对所有项目初始化fancybox，除了克隆；2）在克隆项目上添加自定义点击事件，并在相应的“真实”项目上触发点击事件。这是使用 Slick 滑块的示例： 

// Init fancybox
// =============
var selector = '.slick-slide:not(.slick-cloned)';

// Skip cloned elements
$().fancybox({
  selector : selector,
  backFocus : false
});

// Attach custom click event on cloned elements, 
// trigger click event on corresponding link
$(document).on('click', '.slick-cloned', function(e) {
  $(selector)
    .eq( ( $(e.currentTarget).attr("data-slick-index") || 0) % $(selector).length )
    .trigger("click.fb-start", {
      $trigger: $(this)
    });

  return false;
});

// Init Slick
// ==========
$(".main-slider").slick({
  slidesToShow   : 3,
  infinite : true,
  dots     : false,
  arrows   : false
});

在 CodePen 上查看演示

回到顶部