LiteBox

一个超轻量级的图片灯箱组件，使用原生JavaScript和CSS实现，无需任何外部依赖。
它提供了丰富的图片查看功能，同时保持极小的代码体积(JS ～5.5KiB + CSS ~2.5KiB, Gzip后JS ～2KiB + CSS ～900B)

功能特点

$3

- 核心代码仅8KiB, Gzip后2.87KiB (JS ～5.5KiB + CSS ~2.5KiB, Gzip后JS ～2KiB + CSS ～900B)
- 零外部依赖，纯原生实现
- 流畅动画效果

$3

- 图片缩放：支持放大/缩小查看细节
- 翻页浏览：左右箭头切换图片
- 图片旋转：90度旋转功能
- 重置视图：一键恢复原始大小和位置
- 键盘快捷键：支持ESC关闭、方向键翻页等

$3

- 现代化卡片式布局
- 半透明玻璃态控制面板
- 平滑的过渡动画效果
- 直观的图标按钮控制

安装与使用

$3

``html



alt="自然风光" data-src="https://images.unsplash.com/photo-1501854140801-50d01698950b"
data-caption="自然风景 - 山脉与湖泊" data-title="山脉湖泊">

山脉湖泊

alt="森林晨曦" data-src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05"
data-caption="森林晨曦 - 阳光穿透雾气" data-title="森林晨曦">

森林晨曦

alt="雪山星空" data-src="https://images.unsplash.com/photo-1519681393784-d120267933ba"
data-caption="雪山星空 - 壮丽的银河景观" data-title="雪山星空">

雪山星空

data-src="https://images.unsplash.com/photo-1505142468610-359e7f316449"
data-caption="宁静森林 - 秋季的金黄色调">

宁静森林


`

$3

`html


`

$3

| 属性 | 说明 |
| --- | --- |
| data-src | 高清晰图片地址，没有高清图片地址时，会自动使用 src 属性作为图片地址 |
| src | 缩略图地址 |
| alt | 图片描述 |
| data-title | 图片标题 |
| data-caption | 图片描述 |

使用方法

$3

1. 点击任意缩略图打开灯箱
2. 使用控制按钮进行操作：
- ← → 按钮：前后切换图片
- +/- 按钮：放大/缩小图片
- ↻ 按钮：旋转图片
- ↔ 按钮：重置缩放和位置
- × 按钮：关闭灯箱

$3

- ESC：关闭灯箱
- 左右箭头：切换图片
- +/-：放大/缩小图片
- 0：重置缩放
- R：旋转图片

核心实现

- 使用HTML5