fancybox 幻灯片

点击图片，弹出大图 (幻灯片效果)

1. 在 HTML 中引入 Fancybox 样式表和 JavaScript 文件：

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

2. 创建一个包含缩略图的图片链接，并为其添加 data-fancybox 属性来指定图片组：

<img
  src="https://zichin.com/blog/docs/static/images/logo.png"
  data-fancybox="gallery"
/>
<img
  src="https://zichin.com/blog/docs/static/images/mysql-logo.png"
  data-fancybox="gallery"
/>

通过以上步骤，您就可以在项目中使用 Fancybox 实现灯箱效果，而无需单独引入 jQuery。请注意，具体的自定义选项和样式可以根据您的实际需求来进行调整。

效果展示

//zichin.com/blog/docs/static/cdn/fancybox/fancybox.html

参考资料

Fancybox 的官方网站是 https://fancyapps.com/fancybox/。

您可以在该网站上找到关于 Fancybox 的详细文档、示例和其他资源。官方网站提供了丰富的信息，包括使用指南、API 文档、主题和扩展等。

您可以访问官网了解更多关于 Fancybox 的信息，并获取最新版本的下载和更新。