Fullscreen Lightbox
The clicked photo goes into the browser's real fullscreen over an almost black background; on iPhone, where that mode does not exist, it covers the whole window.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Gallery has 44 effects, including 6 free. Explore the category →
3 usage examples
How it works
On a click on a .fslb-thumb thumbnail, the script opens the modal <dialog>, then requests fullscreen for .fslb-stage, the stage inside it (a <dialog> itself cannot go fullscreen: all three engines refuse). The request is made during the click, as browsers require.
In fullscreen, bars and tabs disappear: the photo is shown as large as possible, up to 90 % of the screen width and 85 % of its height, on rgba(0, 0, 0, 0.98), with ✕ fixed at the top right. If you leave fullscreen with the browser's Escape key, the fullscreenchange event closes the viewer too; ✕ or a click on the black does both at once.
When fullscreen is refused (iPhone, a page inside an <iframe> without allow="fullscreen", an older browser), the request fails silently and nothing else changes: the dialog already fills the whole window, only the browser bars stay visible. Measured by forcing that refusal: a 1280 × 800 stage in a 1280 × 800 window.
Accessibility
- Buttons and name: thumbnails are
<button>elements, ✕ is named “Close”, the viewer is named “Image viewer”. - Focus: placed on ✕ on opening, kept inside the viewer (page behind inert), returned to the thumbnail on closing, including when leaving through the fullscreen Escape key.
- Escape: in fullscreen the browser uses it to leave that mode and the viewer closes along with it; without fullscreen, the script closes.
- Reduced motion: no fade and no growth; fullscreen is requested in the same way.
- Caveat: fullscreen removes the browser's landmarks; keep ✕ visible (it is by default) and never open it without a user click.
Browser compatibility
Unprefixed Fullscreen API: Chrome 71, Firefox 64, Safari 16.4; on iOS, iPad only (@mdn/browser-compat-data: “Only available on iPad, not on iPhone”). The rest follows the viewers' base (modal <dialog>: Firefox 98, Safari 15.4). Fullscreen obtained in Chromium 151, Firefox 153 and WebKit 26.5; leaving fullscreen closes the viewer in all three.
iPhone, Safari 15.4 to 16.3 and iframes without permission: the viewer covers the window (fixed position, 100 % × 100 %) and the image keeps the same maximum size. Without showModal(), nothing opens.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0176-root">
<div class="fslb-grid">
<button type="button" class="fslb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Amber to red gradient" width="1920" height="1280"></button>
<button type="button" class="fslb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Pink to violet gradient" width="1920" height="1280"></button>
<button type="button" class="fslb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Indigo to violet gradient" width="1920" height="1280"></button>
<button type="button" class="fslb-thumb" aria-haspopup="dialog"><img src="photo.jpg" alt="Cyan to emerald gradient" width="1920" height="1280"></button>
</div>
<dialog class="fslb-viewer" aria-label="Image viewer">
<div class="fslb-stage">
<button type="button" class="fslb-close" aria-label="Close"><svg>…</svg></button>
<img class="fslb-image" alt="">
</div>
</dialog>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Maximum image size (CSS — .fslb-image) |
max-width: 90vw; max-height: 85vh |
The image is never enlarged beyond its real size: use wide photos or data-full. |
Stage background (CSS — .fslb-stage) |
rgba(0, 0, 0, 0.98) |
The stage, not the dialog, goes fullscreen: its colour is the one you see. |
✕ position (CSS — .fslb-close) |
fixed, 20 px from top and right | Stays visible in fullscreen and in window mode alike. |
Thumbnails (CSS — --fslb-thumb, --fslb-gap) |
120px, 10px | Width (3:2 format) and spacing of the buttons on the page. |
Large image (HTML — data-full) |
absent | URL loaded on opening instead of the thumbnail. |
Fullscreen inside an iframe (HTML — allow="fullscreen") |
not allowed by default | Without this attribute on the <iframe> holding the gallery, the browser refuses and the viewer stays in window mode. |
FAQ
fullscreenchange on the stage and closes the viewer right away. Outside fullscreen, Escape is handled directly.
