FancyBox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该lightbox除了能够展示图片之外，还可以展示iframed内容， 通过css自定义外观。

使用方法

在html中引入css和js

<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css"
    />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>

HTML结构

<a
    href="https://lipsum.app/id/1/1024x768"
    data-fancybox="gallery"
    >
        <img src="https://lipsum.app/id/1/1024x768">
    </a>

成品展示

更多内容请参考fancyapps官网