??前言

Fancybox 是一個(gè)用于創(chuàng)建靈活且可定制的圖片和媒體彈出框的JavaScript庫。 Fancybox v5是其最新版本。要使用Fancybox v5，需要在HTML文件中包含必要的CSS和JavaScript文件，以及一個(gè)HTML元素作為觸發(fā)器。 然后，使用Fancybox.bind方法來綁定Fancybox到該元素。

??使用步驟

引入fancybox

<!-- 引入fancybox  -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.min.css" media="all" onload="this.media='all'" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox/fancybox.umd.min.js"></script>

??觸發(fā)器

簡(jiǎn)單的例子為：

<a href="01.png" data-fancybox="gallery" data-caption="這是圖片名稱1">
    <img src="01.png" />
</a>
  
<a href="02.png" data-fancybox="gallery" data-caption="這是圖片名稱2">
    <img src="02.png" />
</a>

< a > 標(biāo)簽中的 data-fancybox 屬性將告訴Fancybox要綁定到這個(gè)元素。
data-caption="這是圖片名稱" 這個(gè)可以省略
使用Fancybox.bind方法來綁定Fancybox到該元素
假設(shè)頁面已經(jīng)引入jQuery庫

$(document).ready(function() {
  Fancybox.bind("[data-fancybox]", {
    // 默認(rèn)選項(xiàng)
    dragToClose: false, // 禁用拖動(dòng)關(guān)閉
    wheel: false, // 禁用滾輪縮放
    click: false, // 禁用單擊關(guān)閉
    dblclick: false, // 禁用雙擊縮放
    buttons: ["zoom", "fullScreen", "close"], // 只顯示縮放、全屏和關(guān)閉按鈕
  });
});

這段代碼需要添加到您的JavaScript文件中，這樣，它將在頁面加載時(shí)執(zhí)行，并綁定Fancybox到所有包含 data-fancybox 屬性的元素。
假設(shè)頁面沒有引入jQuery庫
這時(shí)候需要使用JavaScript的原生方法來在文檔加載完成時(shí)調(diào)用 Fancybox.bind()
一種方法是在 window 對(duì)象上添加 load 事件監(jiān)聽器，該監(jiān)聽器將在所有資源（例如圖像和樣式表）加載完成后觸發(fā)。然后，在事件回調(diào)函數(shù)中調(diào)用 Fancybox.bind() 方法。示例代碼如下：

window.addEventListener("load", function() {
  Fancybox.bind("[data-fancybox]", {
    // 默認(rèn)選項(xiàng)
    dragToClose: false, // 禁用拖動(dòng)關(guān)閉
    wheel: false, // 禁用滾輪縮放
    click: false, // 禁用單擊關(guān)閉
    dblclick: false, // 禁用雙擊縮放
    buttons: ["zoom", "fullScreen", "close"], // 只顯示縮放、全屏和關(guān)閉按鈕
  });
});

另一種方法是在 document 對(duì)象上添加 DOMContentLoaded 事件監(jiān)聽器，該監(jiān)聽器將在HTML文檔解析完成后觸發(fā)。這意味著該事件在圖像和其他資源加載之前觸發(fā)，因此可以更快地綁定Fancybox。示例代碼如下：

document.addEventListener("DOMContentLoaded", function() {
  Fancybox.bind("[data-fancybox]", {
    // 默認(rèn)選項(xiàng)
    dragToClose: false, // 禁用拖動(dòng)關(guān)閉
    wheel: false, // 禁用滾輪縮放
    click: false, // 禁用單擊關(guān)閉
    dblclick: false, // 禁用雙擊縮放
    buttons: ["zoom", "fullScreen", "close"], // 只顯示縮放、全屏和關(guān)閉按鈕
  });
});