介绍

开始使用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 的单击事件。使用 hrefdata-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 上查看演示

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

$('[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-widthdata-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-fancyboxdata-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%,你应该使用 leftright属性来定位它。例子:

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

回到顶部