分享20款美化网站的 jQuery Lightbox 灯箱插件

简介：

jQuery Lightbox 灯箱插件是一种强大的前端代码库，目的是美化网站并提高用户体验。它可以用于：展示大图、幻灯片、视频、音频等多种多媒体内容，具有图片预览、淡入淡出、缩放、旋转、拖拽、翻转等多种特效，能在当前页面打开模态窗口、遮盖底层元素、避免浏览器刷新等问题。目前市面上有众多优秀的 jQuery Lightbox 灯箱插件，分享20款，各具特色，可以供大家参考和使用。

准备工作：

为了使用 jQuery Lightbox 灯箱插件，您需要在页面头部引入 jQuery 库和相应的插件代码。插件代码可以通过下载代码库或者通过CDN引入实现。本文以 FancyBox3 插件为例，讲解该插件的使用和配置。

默认配置：

下面是一个最简单的 FancyBox3 使用方法：

<a data-fancybox data-src="big_image.jpg" href="javascript:;">
   <img src="thumb_small.jpg">
</a>

其中，data-fancybox 表示启用插件，data-src 表示大图地址，href 表示缩略图地址。点击缩略图就可以触发插件打开大图效果。此外，FancyBox3 还提供了更多的配置选项，让您可以调整灯箱的尺寸、颜色、元素位置、标题、描述，甚至可以配置背景、边框、遮罩等效果。

自定义配置：

下面是一个更加自定义的 FancyBox3 使用方法：

<a data-fancybox="gallery" data-src="https://vimeo.com/123123" data-options='{"caption": "FancyBox3 Plugin", "hash": false, "speed": 700 }' href="javascript:;">
   <img src="thumb_small.jpg">
</a>

这个示例中，data-fancybox 的值设置为 "gallery" 表示，这些图片组成一个画廊（Gallery），可以一一切换。data-options 用来配置各种参数，例如图片的标题，是否使用 URL 中的哈希值等等。FancyBox3 支持丰富的配置方案，完全可以根据自己的需求，定制出最佳的效果。

示例：

下面是两个 FancyBox3 实现的示例：

① 大图+音乐+iframe：

<a data-fancybox data-src="#music" href="javascript:;" class="btn btn-primary">
   Open Gallery with Music and Videos
</a>

<div style="display:none;" id="music">
   <h2>My Music Player</h2>
   <audio controls loop>
      <source src="https://s1.vocaroo.com/media/download_temp/Vocaroo_s1gMxCy5GZVt.mp3" type="audio/mpeg">
   </audio>
   <iframe width="100%" height="600" src="https://www.youtube.com/embed/OcErQLBYHdg" frameborder="0" allowfullscreen></iframe>
   <img src="https://images.unsplash.com/photo-1497493292307-31c376b6e479?auto=format&fit=crop&w=1052&q=80">
</div>

在这个示例中，data-src 的值设置为 #music 表示，插件会在当前页面找到 ID 为 music 的元素，然后展示这个元素内的多种多媒体内容：音乐、视频、图片。可以实现在同一个窗口内打开不同类型的多媒体文件。

② 大图组+标题：

<div class="row">
   <div class="col-md-4">
      <a data-fancybox="images" href="https://images.unsplash.com/photo-1514891923385-c6bfb6915bfa?auto=format&fit=crop&w=300&q=80" data-caption="Image #1">
         <img src="https://images.unsplash.com/photo-1514891923385-c6bfb6915bfa?auto=format&fit=crop&w=300&q=80" alt="" />
      </a>
   </div>
   <div class="col-md-4">
      <a data-fancybox="images" href="https://images.unsplash.com/photo-1521914602328-b4600e6776f0?auto=format&fit=crop&w=300&q=80" data-caption="Image #2">
         <img src="https://images.unsplash.com/photo-1521914602328-b4600e6776f0?auto=format&fit=crop&w=300&q=80" alt="" />
      </a>
   </div>
   <div class="col-md-4">
      <a data-fancybox="images" href="https://images.unsplash.com/photo-1525342104807-18c1571ce937?auto=format&fit=crop&w=300&q=80" data-caption="Image #3">
         <img src="https://images.unsplash.com/photo-1525342104807-18c1571ce937?auto=format&fit=crop&w=300&q=80" alt="" />
      </a>
   </div>
</div>

在这个示例中，data-fancybox 的值设置为 images 表示，这三张图片属于同一个组。插件会在当前页面找到 ID 为 images 的元素，自动在画廊内切换图片。data-caption 表示图片的标题。可以实现在同一窗口内切换图片，显示图片标题并浏览不同的图片。