图片灯箱
Lightbox浏览器模块图鉴对仓库图片组成的局部图集初始化真实灯箱;离开时只关闭演示拥有的浮层,不接管站点其他图片。



点击图片打开灯箱,可切换、缩放、旋转,并用 Esc 关闭。
本地演示,内容不会保存
属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
selectors | string | string[] | 必填 | 局部图集容器选择器。 |
键盘
- ← / →
- 切换上一张、下一张
- + / -
- 在 50%–300% 六档间缩放
- Ctrl / ⌘ + 滚轮
- 以光标为中心连续缩放
- 0
- 回到 100% 并转正
- R / Shift+R
- 向右、向左旋转 90°
- Tab
- 在查看器控件间循环
- Esc
- 关闭
用法
libs/lightbox/src/index.ts// #sample-gallery 中放置项目的 .blur-img 图片节点。
window.__initLightbox('#sample-gallery');
// 若该图集打开了灯箱,卸载时只关闭它的浮层。
window.__closeLightboxFor('sample-gallery');