图片灯箱

Lightbox浏览器模块

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

预览

点击图片打开灯箱,可切换、缩放、旋转,并用 Esc 关闭。

本地演示,内容不会保存

属性

名称类型默认值说明
selectorsstring | string[]必填局部图集容器选择器。

键盘

← / →
切换上一张、下一张
+ / -
在 50%–300% 六档间缩放
Ctrl / ⌘ + 滚轮
以光标为中心连续缩放
0
回到 100% 并转正
R / Shift+R
向右、向左旋转 90°
Tab
在查看器控件间循环
Esc
关闭

用法

libs/lightbox/src/index.ts
TypeScript
// #sample-gallery 中放置项目的 .blur-img 图片节点。
window.__initLightbox('#sample-gallery');
// 若该图集打开了灯箱,卸载时只关闭它的浮层。
window.__closeLightboxFor('sample-gallery');