浏览器模块 / COMPONENT ATLAS

图片灯箱Lightbox

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

亲手试一试。

01 / LIVE PREVIEW
● Lightbox

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

STATES / 示例状态

图集缩放旋转切换关闭
本地演示,内容不会保存。
INTERACTIVE SPECIMEN · 跟随全站主题

用法

02 / USAGE

下方展示组件的调用方式。

TYPESCRIPT · 浏览器调用
// #sample-gallery 中放置项目的 .blur-img 图片节点。
window.__initLightbox('#sample-gallery');
// 若该图集打开了灯箱,卸载时只关闭它的浮层。
window.__closeLightboxFor('sample-gallery');

主要属性

03 / PROPERTIES
属性 / 类型默认值说明
selectorsstring | string[]必填局部图集容器选择器。
YGGDRASIL · 每一个细节,都有回应。libs/lightbox/src/index.ts
© 2026 Yggdrasil