FancyBox3 响应式相册图片弹出jQuery插件

PetitQ Other/其他 2019-1-30 2.21K 0 1

fancyBox3 是一款优秀的弹出框 Jquery 插件，之前使用过很多 LightBOX 弹窗插件，功能都很强大，fancyBox3 相对来说，不论是设计和功能上都更胜一筹。Fancybox 是一个 JavaScript 库，用于以优雅的方式呈现图像，视频和任何 HTML 内容。它具有您期望的所有功能 - 支持触摸设备，响应式和完全可定制。支持图片放大，图片列表等，功能强大且移动端支持非常棒！

基础部分

可以通过链接.css 和.js 文件安装 fancyBox3 到 html 文件中，确保加载了 jQuery 库（jQuery 3+ 是首选，但 fancyBox3 同样适用于 jQuery 1.9.1+ 和 jQuery 2+）。以下是一个基本的 HTML 模板用作示例：

也想出现在这里？联系我们吧

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

        <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">

```
    </head>
```
```
    <body>
```

        <a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>

        <a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>

        <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

        <script src="jquery.fancybox.min.js"></script>

```
    </body>
```
```
</html>
```

备注：其实使用方法很简单，就是在文件头（如主题内的 header.php 文件）中引入 jquery.fancybox.min.css 和页脚加入 jquery.fancybox.min.js 三个文件（可以使用以上代码中的链接，或者直接下载后上传到所使用主题文件夹内再添加），而 jquery-3.2.1.min.js 文件一般不用理会，因为大部分 WordPress 站点都已经引入有 jQuery 库了（如果没有需要引入）。确保在 fancyBox3 JS 文件之前添加了 jQuery 库，如果您的页面上已经有 jQuery，则不应再次加载，不要同时包含 fancybox.js 和 fancybox.min.js 文件，当在浏览器上直接打开本地文件时，某些功能（ajax，iframe 等）不起作用，代码必须在 Web 服务器上运行。

使用方法

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

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

如果有一组项目，则可使用 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>

如果选择此方法，将应用默认设置。有关如何通过更改默认值或使用属性来定制示例的信息，请参阅选项一节 data-options 有时有多个链接指向相同的来源，并在画廊中创建重复。为了避免这种情况，只需使用 data-trigger 属性中用于 data-fancybox 其他链接的相同值的属性即可。可选地，使用 data-indexattribute 来指定起始元素的索引（查看演示）：

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

JavaScript

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

    $('[data-fancybox="gallery"]').fancybox({

```
        // Options will go here
```
```
    });
```

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

```
    $().fancybox({
```

        selector : '[data-fancybox="gallery"]',

```
        loop     : true
```
```
    });
```

请记住，所选项目不会自动分组到图库中。您可以通过对 data-fancybox 属性使用相同的值来创建一个或多个组，类似于上一节中的示例。您也可以编程方式打开并关闭 fancybox。以下是一些示例，请访问 API 部分获取更多信息和演示，显示信息（查看演示）：

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

显示 iframed 页面（查看演示）：

```
    $s.fancybox.open({
```

        src  : 'link-to-your-page.html',

```
        type : 'iframe',
```
```
        opts : {
```

            afterShow : function( instance, current ) {

                console.info( 'done!' );

```
            }
```
```
        }
```
```
    });
```

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

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

媒体图片

使用 fancybox 的标准方式是使用链接到较大图像的许多缩略图（查看演示）：

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

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

data-width - 图像的真实宽度

data-height - 图像的真实高度

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

您还可以使用这些 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;

```
            }
```
```
        }
```
```
    });
```

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>

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

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

媒体视频

ouTube 和 Vimeo 视频只需提供页面 URL 即可与 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>
```

通过 URL 参数控制 YouTube 和 Vimeo 视频（查看演示）：

    <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>
```

通过 JavaScript（查看演示）：

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

内联 HTML

对于内联内容，使用唯一标识创建隐藏元素（查看演示）：

<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>

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

AJAX

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

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

此外，可以使用该 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>
```

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

从 iframe 中访问和控制父窗口中的 fancybox：

    // Adjust iframe height according to the contents

    parent.jQuery.fancybox.getInstance().update();

```
    // Close current fancybox instance
```

    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 选项），那么脚本将尝试计算内容尺寸，并将调整 iframe 的宽度/高度以适应其中的内容。请记住，由于相同的原产地政策，有一些限制。此示例将禁用 iframe 预加载，并将显示 iframe 旁边的小关闭按钮而不是工具栏（查看演示）：

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

FancyBox3 响应式相册图片弹出 jQuery 插件

已有 553 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

Other/其他

FancyBox3 响应式相册图片弹出jQuery插件

基础部分

使用方法

JavaScript

媒体图片

媒体视频

内联 HTML

AJAX

IFRAME

FancyBox3 响应式相册图片弹出 jQuery 插件

相关文章

常用正则表达式集合（持续补充中）

JavaScript 正则表达式在线测试工具

网站CDN加速导致百度小程序不显示图片的解决方法

发表回复取消回复

热销模板

Other/其他

基础部分

使用方法

JavaScript

媒体图片

媒体视频

内联 HTML

AJAX

IFRAME

FancyBox3 响应式相册图片弹出 jQuery 插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复