当前位置：首页-WordPress文章-jQuery插件-正文

jQuery 强大丰富的响应式弹出框插件 fancyBox3

萨龙龙 萨龙龙 jQuery插件6年前03.88W

fancyBox3 是一款优秀的弹出框Jquery插件，之前使用过很多 LightBOX 弹窗插件，功能都很强大，fancyBox3 相对来说，不论是设计和功能上都更胜一筹，所以萨龙网络所有主题需要弹出框的都有添加 fancyBox3 插件。

依赖

jQuery 3+ 是首选，但 fancyBox3 同样适用于jQuery 1.9.1+ 和 jQuery 2+。

兼容性

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

fancyBox3 已经在以下浏览器/设备上测试过：

  • Chrome
  • Firefox
  • IE10/11
  • Edge
  • iOS Safari
  • Nexus 7 Chrome

设置

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>My page</title>
  7.     <!-- CSS -->
  8.     <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
  9. </head>
  10. <body>
  12.     <!-- Your HTML content goes here -->
  14.     <!-- JS -->
  15.     <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
  16.     <script src="jquery.fancybox.min.js"></script>
  17. </body>
  18. </html>

下载 fancyBox3

在 GitHub 上下载最新的 fancyBox3。

或者直接链接到cdnjs上的fancybox文件 -  https://cdnjs.com/libraries/fancybox

包安装

fancyBox3 也可在npm和Bower上使用。

  1. # NPM
  2. npm install @fancyapps/fancybox --save
  4. # Bower
  5. bower install fancybox --save

注意

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

如何使用

用数据属性初始化

使用fancyBox3 最基本的方法是通过添加 data-fancybox属性到元素中。这会自动绑定并启动fancyBox3 的点击事件。使用href或 data-src属性来指定内容的来源。例：

  1. <a href="image.jpg" data-fancybox data-caption="Caption for single image">
  2.     <img src="thumbnail.jpg" alt="" />
  3. </a>

在CodePen上查看演示

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

  1. <a href="image_1.jpg" data-fancybox="gallery" data-caption="Caption #1">
  2.     <img src="thumbnail_1.jpg" alt="" />
  3. </a>
  5. <a href="image_2.jpg" data-fancybox="gallery" data-caption="Caption #2">
  6.     <img src="thumbnail_2.jpg" alt="" />
  7. </a>

在CodePen上查看演示

如果选择此方法，将应用默认设置。有关如何通过更改默认值或使用属性来定制示例的信息，请参阅 选项一节 data-options

有时有多个链接指向相同的来源，并在画廊中创建重复。为了避免这种情况，只需使用 data-trigger属性中用于data-fancybox其他链接的相同值的属性即可。可选地，使用 data-indexattribute来指定起始元素的索引：

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

在CodePen上查看演示

使用JavaScript进行初始化

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

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

在CodePen上查看演示
有时可能需要将fancybox绑定到动态添加的元素。使用 selector选项为现在或将来存在的元素附加点击事件侦听器。例：

  1. $().fancybox({
  2.     selector : '[data-fancybox="gallery"]',
  3.     loop     : true
  4. });

在CodePen上查看演示

请记住，所选项目不会自动分组到图库中。您可以通过对data-fancybox属性使用相同的值来创建一个或多个组 ，类似于上一节中的示例。

使用Javascript

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

显示简单信息：

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

在CodePen上查看演示
显示iframed页面：

  1. $s.fancybox.open({
  2.     src  : 'link-to-your-page.html',
  3.     type : 'iframe',
  4.     opts : {
  5.         afterShow : function( instance, current ) {
  6.             console.info( 'done!' );
  7.         }
  8.     }
  9. });

在CodePen上查看演示

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

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

媒体类型

图片

使用fancybox的标准方式是使用链接到较大图像的许多缩略图：

  1. <a href="image.jpg" data-fancybox="images" data-caption="My caption">
  2.     <img src="thumbnail.jpg" alt="" />
  3. </a>

在CodePen上查看演示

默认情况下，fancybox会在显示图像之前完全预先载入图像。您可以选择立即显示图像。它将在接收数据时呈现并显示全尺寸图像。要做到这一点，一些属性是必要的：

  • data-width   - 图像的真实宽度
  • data-height - 图像的真实高度
  1. <a href="image.jpg" data-fancybox="images" data-width="2048" data-height="1365">
  2.     <img src="thumbnail.jpg" />
  3. </a>

在CodePen上查看演示

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

  1. $('[data-fancybox="images"]').fancybox({
  2.     afterLoad : function(instance, current) {
  3.         var pixelRatio = window.devicePixelRatio || 1;
  5.         if ( pixelRatio > 1.5 ) {
  6.             current.width  = current.width  / pixelRatio;
  7.             current.height = current.height / pixelRatio;
  8.         }
  9.     }
  10. });

在CodePen上查看演示

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

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

在CodePen上查看演示
右键单击也可以保护图像免于下载。虽然这不能保护真正确定的用户，但它应该阻止绝大多数人将您的文件撕掉。可选地，将水印放在图像上。

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

在CodePen上查看演示

视频

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

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

  1. <a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
  2.     YouTube video
  3. </a>
  5. <a data-fancybox href="https://vimeo.com/191947042">
  6.     Vimeo video
  7. </a>
  9. <a data-fancybox data-width="640" data-height="360" href="video.mp4">
  10.     Direct link to MP4 video
  11. </a>
  13. <a data-fancybox href="#myVideo">
  14.     HTML5 video element
  15. </a>
  17. <video width="640" height="320" controls id="myVideo" style="display:none;">
  18.     <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.mp4" type="video/mp4">
  19.     <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.webm" type="video/webm">
  20.     <source src="https://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.ogv" type="video/ogg">
  21.     Your browser doesn't support HTML5 video tag.
  22. </video>

在CodePen上查看演示
通过URL参数控制YouTube和Vimeo视频：

  1. <a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk&amp;autoplay=1&amp;rel=0&amp;controls=0&amp;showinfo=0">
  2.     YouTube video - hide controls and info
  3. </a>
  5. <a data-fancybox href="https://vimeo.com/191947042?color=f00">
  6.     Vimeo video - custom color
  7. </a>

在CodePen上查看演示
通过JavaScript：

  1. $('[data-fancybox]').fancybox({
  2.     youtube : {
  3.         controls : 0,
  4.         showinfo : 0
  5.     },
  6.     vimeo : {
  7.         color : 'f00'
  8.     }
  9. });

在CodePen上查看演示

内联HTML

对于内联内容，使用唯一标识创建隐藏元素：

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

然后简单地创建一个链接，该链接的 data-src属性与您想要打开的元素的ID相匹配（前面有一个散列标记（＃）;在本例中 #hidden-content）：

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

在CodePen上查看演示

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

AJAX

要通过AJAX加载内容，您需要为data-type="ajax"链接添加一个 属性：

  1. <a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:;">
  2.     AJAX content
  3. </a>

在CodePen上查看演示

此外，可以使用该data-filter属性定义选择器以 仅显示响应的一部分。选择器可以是任何字符串，这是一个有效的jQuery选择器：

  1. <a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" data-filter="#two" href="javascript:;">
  2.     AJAX content
  3. </a>

在CodePen上查看演示

IFRAME

如果内容可以显示在页面上，并且在iframe中的放置不会被该页面的脚本或安全配置阻止，则可以将其呈现在fancybox中：

  1. <a data-fancybox data-type="iframe" data-src="http://codepen.io/fancyapps/full/jyEGGG/" href="javascript:;">
  2.     Webpage
  3. </a>
  5. <a data-fancybox data-type="iframe" data-src="https://mozilla.github.io/pdf.js/web/viewer.html" href="javascript:;">
  6.     Sample PDF file
  7. </a>

在CodePen上查看演示
从iframe中访问和控制父窗口中的fancybox：

  1. // Adjust iframe height according to the contents
  2. parent.jQuery.fancybox.getInstance().update();
  4. // Close current fancybox instance
  5. parent.jQuery.fancybox.getInstance().close();

Iframe尺寸可以通过CSS控制：

  1. .fancybox-slide--iframe .fancybox-content {
  2.     width  : 800px;
  3.     height : 600px;
  4.     max-width  : 80%;
  5.     max-height : 80%;
  6.     margin: 0;
  7. }

如果需要，这些CSS规则可以被JS覆盖。

  1. $("[data-fancybox]").fancybox({
  2.     iframe : {
  3.         css : {
  4.             width : '600px'
  5.         }
  6.     }
  7. });

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

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

  1. $('[data-fancybox]').fancybox({
  2.     toolbar  : false,
  3.     smallBtn : true,
  4.     iframe : {
  5.         preload : false
  6.     }
  7. })

在CodePen上查看演示

更多内容请访问：https://fancyapps.com/fancybox/3/document/

jQuery插件(4)弹出框(1)
本文原创，作者：萨龙龙，其版权均为萨龙网络所有。
如需转载，请注明出处：https://salongweb.com/fancybox3.html
萨龙龙

萨龙龙

侠客

一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！

1341.93M234.11W￥2.93W

相关文章

WOW.js简单实现页面滚动动画效果

在很多网页上，尤其是一些科技企业的产品展示页面，当你滚动页面的时候会看到各式各样的元素动画效果，非常的炫丽，很吸引人。WOW.js就是一款帮助你实现这种CSS3动画效果的javascript插件，不依赖jQuery，…
jQuery插件8年前01.90W0

jQuery智能筛选布局排序插件Isotope的介绍

Isotope是一个优秀的jQuery插件能够对一组页面元素进行筛选、排序、并创建智能布局。利用这个插件，能够对任意给定的一组元素用显示/隐藏效果进行过滤并且可以用花俏的动画进行重新排序。这个插件的布局功能非常强大，…
jQuery插件8年前01.76W0

jQuery 显示与隐藏更多内容插件 readmore.js

开发一个WordPress文章筛选功能时，因为选项较多，默认只显示一行，可通过更多与关闭按钮来切换内容，使用到强大实用且轻巧的jQueryreadmore.js插件，可显示与隐藏更多内容，自动添加“更多”和“…
jQuery插件6年前01.59W0