超轻量级原生JavaScript图片灯箱

LiteBox是一个纯原生实现的轻量级图片灯箱组件，无任何外部依赖，提供丰富的图片查看功能，完美兼容现代浏览器。

JS ～5.5KiB + CSS ~2.5KiB

Gzip后 JS ～2KiB + CSS ～900B

零依赖，极速加载

NPM 查看文档

核心特性

原生JavaScript实现，轻量高效且功能强大

极速轻量

核心代码仅8KiB，Gzip后压缩至2.87KiB，无任何外部依赖，确保最快加载速度

强大功能

支持图片缩放、旋转、翻页浏览、一键重置等功能，满足各种图片查看需求

键盘导航

内置丰富键盘快捷键：ESC关闭、方向键翻页、R旋转、0重置、+/-缩放

现代UI

卡片式布局、半透明控制面板、流畅动画效果，提供优雅的用户体验

HTML5对话框

基于HTML5 <dialog>元素实现，支持现代浏览器并自动降级处理

简单集成

通过简单HTML属性配置，支持npm安装或CDN引入，快速集成到项目中

效果展示

点击下方图片体验LiteBox灯箱功能

山脉与湖泊

自然风光 - 山脉与宁静的湖泊

晨雾森林

森林晨曦 - 阳光穿透晨雾

雪山星空

壮丽的雪山与银河景观

宁静森林

秋季森林的金黄色调

放大图片

按 + 键

缩小图片

按 - 键

旋转图片

按 R 键

重置视图

按 0 键

快速开始

只需简单几步即可集成LiteBox

安装 LiteBox

                    
<!-- 基本HTML结构示例 -->
<div class="gallery">
  <div class="thumbnail">
    <img 
      src="thumbnail.jpg"
      data-src="fullsize.jpg"
      alt="图片描述"
      data-title="图片标题"
      data-caption="图片说明"
    />
  </div>
</div>


<!-- 引入LiteBox -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@oblivionocean/litebox@latest/dist/index.css">
<script src="https://cdn.jsdelivr.net/npm/@oblivionocean/litebox@latest/dist/index.min.js"></script>