LiteZoom 快速开始 演示 API GitHub

轻量图片灯箱，
一个文件的事。

缩放、平移、触屏手势、键盘导航、无障碍标注——全部装进一个零依赖的 JavaScript 文件。CSS 内嵌，无需构建步骤，也不挑框架。

6.7 KB min+gzip 0 依赖 1 个文件 MIT
看演示

快速开始

引入脚本，绑定选择器，完成。

<!-- 引入（也可下载后自托管） -->
<script src="https://litezoom.dev/litezoom.min.js" defer></script>

<!-- 绑定：文章里的图片点击放大，full 模式带缩放 / 平移 / 缩略图条 -->
<script>
  LiteZoom.bind('.post-content img', { mode: 'full' });
</script>
https://litezoom.dev/litezoom.min.js

演示

这个页面自己就在用 LiteZoom——点击任意图片。滚轮或双指缩放，拖拽平移，下拉关闭。

键盘：Esc 关闭 · ← → 切换 · + − 缩放 · 双击在 1x / 2x 之间切换

为什么是它

为内容站点做的取舍，不是功能竞赛。

单文件交付

CSS 内嵌、SVG 图标内联。没有构建链、没有 peer dependency，复制一个文件到任何项目都能用。

两种模式

simple 只做点开与切换，适合信息流；full 加缩放、平移、缩略图条与 caption，适合文章正文。

完整手势

滚轮与双指缩放、拖拽平移、左右滑动切换、下拉关闭——桌面与触屏同一套 Pointer Events 实现。

无障碍认真做

关闭后焦点还原到触发元素；aria 文案可整套本地化；尊重 prefers-reduced-motion。

不劫持真实链接

图片包在指向其他页面的链接里时放行导航；指向大图的链接优先加载高清原图。无扩展名的地址用 data-litezoom 显式声明。

懒加载增强

附带 enhance()：IntersectionObserver 懒加载 + 模糊淡入，与灯箱共用一次绑定。

API

方法说明
LiteZoom.bind(sel, opts)委托式绑定：匹配 sel 的图片点击后打开。opts.mode 取 'simple' | 'full'；group(img) 返回分组键决定同组切换；caption(img) 返回说明文字；exclude(img) 返回 true 时跳过。
LiteZoom.open(items, i, opts)手动打开：items 为 {src, thumb?, caption?} 数组，i 为起始下标。适合 React / Vue 等自管点击的场景。
LiteZoom.close()关闭当前灯箱。
LiteZoom.enhance(sel, opts)图片增强：懒加载（data-src）、模糊淡入；opts.zoom 为 true 时同时绑定灯箱。
LiteZoom.refresh(root)动态插入内容后，对新图片重新应用增强。
data-litezoom显式声明，优先于扩展名启发式：加在 <a> 上表示「href 就是图片，开灯箱」（适合无扩展名的 CDN 变换地址）；加在 <img data-litezoom="大图URL"> 上直接指定高清地址，无需链接包裹。
LiteZoom.labels(map)覆盖无障碍文案（默认中文）：{viewer, prev, next, zoomIn, zoomOut, close, thumb(i)}。