图片灯箱

Artalk LightBox 插件能帮助你将网站现有的图片灯箱功能自动集成到 Artalk 中。

<!-- 1. 引入图片灯箱依赖，例如 LightGallery (通常博客主题已提供，无需再引入) -->
<script src="lightgallery.js"></script>

<!-- 2. 引入 Artalk -->
<link href="/lib/artalk/Artalk.css" rel="stylesheet" />
<script src="/lib/artalk/Artalk.js"></script>

<!-- 3. 引入 Artalk LightBox 插件 -->
<script src="https://unpkg.com/@artalk/plugin-lightbox/dist/artalk-plugin-lightbox.js"></script>

如上所示，额外引入一个 artalk-plugin-lightbox.js 文件即可。

目前自动集成支持：LightGallery [v2.5.0] / FancyBox [v4.0.27] / lightbox2 [v2.11.3]

对于还未适配的图片灯箱，欢迎提交 PR -> 查看代码

附：图片灯箱依赖 CDN 资源

注：通常一个博客主题本来就是有图片灯箱插件的，所以无需重复引入。

LightGallery

<link
  rel="stylesheet"
  href="https://unpkg.com/lightgallery@2.5.0/css/lightgallery.css"
/>
<script src="https://unpkg.com/lightgallery@2.5.0/lightgallery.min.js"></script>

FancyBox

<link
  rel="stylesheet"
  href="https://unpkg.com/@fancyapps/ui@4.0.27/dist/fancybox.css"
/>
<script src="https://unpkg.com/@fancyapps/ui@4.0.27/dist/fancybox.umd.js"></script>

配置灯箱

在引入 artalk-plugin-lightbox.js 之前对全局变量 ATK_LIGHTBOX_CONF 进行设置，如下：

<script>
  window.ATK_LIGHTBOX_CONF = {
    groupAll: true,
    // ...其他配置
  }
</script>
<script src="artalk-plugin-lightbox.js"></script>