灯箱 5.2.0
¥Lightbox 5.2.0
灯箱是一种模态窗口，用于全屏叠加显示图片或视频。它非常适合点击缩略图来查看更大的 image 或 video。
¥A lightbox is a modal that displays an image or video in a full-screen overlay. It's great for things like clicking on thumbnails to view a larger image or video.
图片灯箱
¥Image Lightbox
在 reveal.js 中触发灯箱的最简单方法是将 data-preview-image 属性添加到 img 标签。点击下图，将在叠加层中打开同一张图片。
¥The simplest way to trigger a lightbox in reveal.js is to add the data-preview-image attribute to an img tag. Clicking on the image below, will open the same image in an overlay.
<img src="reveal.png" data-preview-image>
灯箱并不仅限于打开图片源。你可以通过为 data-preview-image 属性赋值来打开任何你想要的图片。
¥Lightboxes aren't limited to opening the image src. You can open any image you like by assigning a value to the data-preview-image attribute.
<img src="reveal.png" data-preview-image="mastering.svg">视频灯箱
¥Video Lightbox
视频灯箱的工作方式与图片灯箱相同，只是你使用 data-preview-video 属性。
¥Video lightboxes work the same way as image lightboxes except you use the data-preview-video attribute instead.
<video src="video.mp4" data-preview-video></video>
<img src="reveal.png" data-preview-video="video.mp4">灯箱媒体大小
¥Lightbox Media Size
可以使用 data-preview-fit 属性控制灯箱中媒体的大小。支持以下适配模式：
¥The sizing of media in the lightbox can be controlled using the data-preview-fit attribute. The following fit modes are supported:
| 值 | 效果 |
|---|---|
| scale-down（默认） | 如果需要，可缩小媒体以适应灯箱。 |
| contain | 上下缩放媒体以适应灯箱，且不进行裁剪。 |
| cover | 缩放媒体以覆盖整个灯箱，即使部分内容被截断。 |
<img src="reveal.png" data-preview-image data-preview-fit="cover">
适用于任何元素
¥Works on Any Element
请注意，灯箱功能适用于任何元素，而不仅仅是图片和视频。例如，你可以通过点击按钮或链接来触发图片或视频灯箱。
¥Note that the lightbox feature works on any element, not just images and videos. For example, you can trigger an image or video lightbox from clicking a button or link.
<a data-preview-image="image.png">📸 Open Logo</a>
<button data-preview-video="video.mp4">🎥 Open Video</button>iframe 灯箱
¥Iframe Lightbox
可以使用 data-preview-link 属性预览 iframe 灯箱中的链接。当将此属性添加到 <a> 标签时，reveal.js 将自动在 iframe 中打开链接的 href。
¥It's possible to preview links in iframe lightboxes using the data-preview-link attribute. When this attribute is added to an <a> tag, reveal.js will automatically open the link's href in an iframe.
如果你想从另一个元素打开 iframe 灯箱，你可以将 iframe 源设置为 data-preview-link 属性的值。
¥If you want to open an iframe lightbox from another element, you can set the iframe source as a value to the data-preview-link attribute.
<a href="https://hakim.se" data-preview-link>Open Hakim's Website</a>
<img src="reveal.png" data-preview-link="https://hakim.se">请注意，此功能仅在链接允许嵌入时才有效。许多网站禁止通过 x-frame-options 或 Content-Security-Policy 嵌入。
¥Note that this will only work if the link allows for embedding. Many websites prevent embedding via x-frame-options or Content-Security-Policy.