Lightbox 大图预览
/LYTE-boks/ · noun · 浮层类模式 · #128
点开缩略图后，在压暗的页面上放大显示照片或视频的浮层：右上角有关闭（×）按钮，用箭头或左右滑动切换图库里的其他图片，常带图片说明和计数（3 / 12）。按 Esc 或点击暗色背景关闭。网页设计里叫灯箱（lightbox），它是专门用来看图的模态框。
别名：图片灯箱、图片预览。
你可能会这样叫它
- “点开放大的图片”
- “黑色背景的图片弹窗”
- “全屏看图”
- “可以左右切换的相册”
- “点击图片放大预览”
……它的名字是 大图预览（Lightbox）。
常见问题
大图预览是什么？
大图预览就是点开缩略图后，在压暗的页面上放大显示原图的浮层，网页设计里叫灯箱（lightbox）。它通常有关闭按钮、左右切换箭头和“3 / 12”这样的计数，按 Esc 或点击背景关闭；手机上可以左右滑动切换、双指缩放。
代码里叫什么
| Web (HTML) | <dialog> showModal() |
|---|---|
| Web libraries | PhotoSwipe GLightbox Fancybox |
| Ant Design | Image Image.PreviewGroup |
| SwiftUI (iOS) | .fullScreenCover TabView 没有看图组件：全屏 cover 里放分页的 TabView，每页一张可缩放的图 |
| Jetpack Compose | HorizontalPager 没有看图组件：全屏对话框里放一个可缩放图片的 pager |
复制给 AI 编程工具
让这些缩略图点开后在灯箱里看：点击一张，就在压暗的页面中央用模态 <dialog> 显示原图，带关闭按钮、上一张和下一张箭头、计数（3 / 12）和图片说明。按 Esc、点关闭按钮或点击背景都能关闭，关闭后焦点回到原来的缩略图；方向键和滑动切换图片，触屏上双指或双击缩放，并提前加载下一张。每张图都要有真实的 alt 文字。