Lightbox

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

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>

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

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">

The sizing of media in the lightbox can be controlled using the data-preview-fit attribute. The following fit modes are supported:

ValueEffect
scale-down (default)Scale media down if needed to fit in the lightbox.
containScale media up and down to fit the lightbox without cropping.
coverScale media to cover the entire lightbox, even if some of it is cut off.
<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>
📸 Open Logo

Iframe Lightbox

It's also possible to preview links in iframe lightboxes. The syntax for this is slightly different from how image and video lightboxes work. To enable a link preview, you'll need to add the data-preview-link attribute to an anchor tag. It does not accept any value and will always use the anchor's href attribute as the source for the iframe.

<a href="https://hakim.se" data-preview-link>Open Hakim's Website</a>

Note that this will only work if the link allows for embedding. Many domains prevent embedding via x-frame-options or Content-Security-Policy.