Skip to content
Español

Navigate

Español

Type to search. Press Escape to close.

    Components · js

    Gallery and lightbox

    A gallery is a list of links to images. That is the whole markup, and that is what the server sends: click a tile without JavaScript and the browser shows the full photograph, because the tile is an <a href> pointing at it. On init the component builds one viewer per gallery, hands it to Dialog for the top layer, the focus trap, Escape and the return of focus, and from then on a click opens the image in place with its caption, a counter, arrows, zoom and a swipe.

    CSS: css/components/lightbox.css (in ivolt.css). JS: @intervolutions/ivolt/lightbox or auto.js. Added in v0.7.

    Photographs, with the viewerfixtures/lightbox/photos.htmlOpen alone — Photographs, with the viewer
    <p class="iv-u-m-0 iv-u-mb-6">Six photographs from the documentation assets, each one linking to its own file. Click a tile and the
viewer opens on it; with JavaScript switched off the link still resolves and the browser shows the full photograph, which is
what a gallery has to do before anything enhances it.</p>

<div class="iv-gallery" data-iv-component="lightbox" data-iv-gallery-label="Photographs, image viewer">
  <a class="iv-gallery__item" href="/photos/p1018.jpg" data-iv-caption="A road on the cliff edge. Photograph by Andrew Ridley on Unsplash.">
    <img class="iv-gallery__img" src="/photos/p1018.jpg" alt="A single-track road winding along a green cliff face under low cloud" width="1280" height="800" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="/photos/p1036.jpg" data-iv-caption="Camp under the peaks. Photograph by Wolfgang Lutz on Unsplash.">
    <img class="iv-gallery__img" src="/photos/p1036.jpg" alt="A yellow tent in a snow-covered camp below sharp snowy peaks" width="1280" height="800" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="/photos/p1043.jpg" data-iv-caption="Granite over the river. Photograph by Christian Joudrey on Unsplash.">
    <img class="iv-gallery__img" src="/photos/p1043.jpg" alt="A granite cliff rising above a river lined with pine forest" width="1280" height="800" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="/photos/p1050.jpg" data-iv-caption="Stacks off the cliffs. Photograph by Joseph Barrientos on Unsplash.">
    <img class="iv-gallery__img" src="/photos/p1050.jpg" alt="Pale sea cliffs and rock stacks above turquoise water" width="1280" height="800" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="/photos/p1080.jpg" data-iv-caption="Strawberries by the crate. Photograph by veeterzy on Unsplash.">
    <img class="iv-gallery__img" src="/photos/p1080.jpg" alt="Crates of ripe strawberries seen from above" width="1280" height="800" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="/photos/p1084.jpg" data-iv-caption="Walruses on the sand. Photograph by Jay Ruzesky on Unsplash.">
    <img class="iv-gallery__img" src="/photos/p1084.jpg" alt="Two walruses resting on a pale sand beach" width="1280" height="800" loading="lazy">
  </a>
</div>
    // data-iv-component="lightbox"
{
  galleryLabel: "Photographs, image viewer",
  caption: "A road on the cliff edge. Photograph by Andrew Ridley on Unsplash.",
}

    A gallery of photographs

    The six tiles on the stage above are real photographs served from this site, each linking to its own file. Open one: the viewer takes over the window, the caption names the photographer, and the arrows walk the set. Press Escape and focus lands back on the tile you came from.

    Photographs by Andrew Ridley, Wolfgang Lutz, Christian Joudrey, Joseph Barrientos, veeterzy and Jay Ruzesky on Unsplash, used here as documentation assets. The npm package ships no bitmaps: the fixtures below draw their artwork as inline SVG.

    The packaged fixture

    The same gallery with the artwork the package carries. Every caption says what it is, and the tiles link to the drawing itself rather than to a photograph.

    Gallery and viewerfixtures/lightbox/basic.htmlOpen alone — Gallery and viewer
    <p class="iv-u-m-0 iv-u-mb-6">Six pieces of sample artwork drawn as inline SVG: the package ships no bitmaps, and every
caption says so. Each tile links to the full image, so the gallery still works with JavaScript switched off; with it, the
viewer opens on the tile that was clicked.</p>

<div class="iv-gallery" data-iv-component="lightbox">
  <a class="iv-gallery__item" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230B1E3A'/%3E%3Cstop offset='1' stop-color='%233E76A8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Ccircle cx='888' cy='176' r='72' fill='%23F6D77A' opacity='0.95'/%3E%3Cpath d='M0 528 L264 336 L552 544 L840 368 L1200 576 L1200 800 L0 800 Z' fill='%232A5E86' opacity='0.8'/%3E%3Cpath d='M0 640 L384 448 L744 672 L1032 512 L1200 656 L1200 800 L0 800 Z' fill='%23173A57'/%3E%3Cpath d='M0 720 L480 608 L888 752 L1200 672 L1200 800 L0 800 Z' fill='%230A1B2B'/%3E%3C/svg%3E" data-iv-caption="Blue hour — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.">
    <img class="iv-gallery__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230B1E3A'/%3E%3Cstop offset='1' stop-color='%233E76A8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Ccircle cx='888' cy='176' r='72' fill='%23F6D77A' opacity='0.95'/%3E%3Cpath d='M0 528 L264 336 L552 544 L840 368 L1200 576 L1200 800 L0 800 Z' fill='%232A5E86' opacity='0.8'/%3E%3Cpath d='M0 640 L384 448 L744 672 L1032 512 L1200 656 L1200 800 L0 800 Z' fill='%23173A57'/%3E%3Cpath d='M0 720 L480 608 L888 752 L1200 672 L1200 800 L0 800 Z' fill='%230A1B2B'/%3E%3C/svg%3E" alt="Abstract landscape: a pale sun over three layered blue ridges" width="1200" height="800" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233A1C06'/%3E%3Cstop offset='1' stop-color='%23E2A253'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Ccircle cx='360' cy='464' r='104' fill='%23FFE9B0' opacity='0.9'/%3E%3Cpath d='M0 528 Q 360 400 660 544 T 1200 496 L1200 800 L0 800 Z' fill='%23A8621F' opacity='0.85'/%3E%3Cpath d='M0 640 Q 300 528 624 656 T 1200 608 L1200 800 L0 800 Z' fill='%235A2C0E'/%3E%3Cpath d='M0 744 Q 456 656 840 760 T 1200 720 L1200 800 L0 800 Z' fill='%232A1405'/%3E%3C/svg%3E" data-iv-caption="Dunes — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.">
    <img class="iv-gallery__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233A1C06'/%3E%3Cstop offset='1' stop-color='%23E2A253'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Ccircle cx='360' cy='464' r='104' fill='%23FFE9B0' opacity='0.9'/%3E%3Cpath d='M0 528 Q 360 400 660 544 T 1200 496 L1200 800 L0 800 Z' fill='%23A8621F' opacity='0.85'/%3E%3Cpath d='M0 640 Q 300 528 624 656 T 1200 608 L1200 800 L0 800 Z' fill='%235A2C0E'/%3E%3Cpath d='M0 744 Q 456 656 840 760 T 1200 720 L1200 800 L0 800 Z' fill='%232A1405'/%3E%3C/svg%3E" alt="Abstract landscape: warm dunes curving under a low amber sun" width="1200" height="800" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2304261F'/%3E%3Cstop offset='1' stop-color='%234FA98A'/%3E%3C/linearGradient%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2306302A'/%3E%3Cstop offset='1' stop-color='%23021512'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Ccircle cx='600' cy='352' r='80' fill='%23EAF7C8' opacity='0.92'/%3E%3Crect y='448' width='1200' height='352' fill='url(%23w)'/%3E%3Crect x='478' y='464' width='244' height='5' rx='3' fill='%23EAF7C8' opacity='0.34'/%3E%3Crect x='498' y='509' width='205' height='5' rx='3' fill='%23EAF7C8' opacity='0.28'/%3E%3Crect x='518' y='554' width='165' height='5' rx='3' fill='%23EAF7C8' opacity='0.22'/%3E%3Crect x='538' y='599' width='125' height='5' rx='3' fill='%23EAF7C8' opacity='0.17'/%3E%3Crect x='557' y='644' width='86' height='5' rx='3' fill='%23EAF7C8' opacity='0.12'/%3E%3Crect x='577' y='689' width='46' height='5' rx='3' fill='%23EAF7C8' opacity='0.08'/%3E%3Crect x='144' y='544' width='240' height='3' fill='%23EAF7C8' opacity='0.16'/%3E%3Crect x='744' y='624' width='312' height='3' fill='%23EAF7C8' opacity='0.12'/%3E%3C/svg%3E" data-iv-caption="Still water — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.">
    <img class="iv-gallery__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2304261F'/%3E%3Cstop offset='1' stop-color='%234FA98A'/%3E%3C/linearGradient%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2306302A'/%3E%3Cstop offset='1' stop-color='%23021512'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Ccircle cx='600' cy='352' r='80' fill='%23EAF7C8' opacity='0.92'/%3E%3Crect y='448' width='1200' height='352' fill='url(%23w)'/%3E%3Crect x='478' y='464' width='244' height='5' rx='3' fill='%23EAF7C8' opacity='0.34'/%3E%3Crect x='498' y='509' width='205' height='5' rx='3' fill='%23EAF7C8' opacity='0.28'/%3E%3Crect x='518' y='554' width='165' height='5' rx='3' fill='%23EAF7C8' opacity='0.22'/%3E%3Crect x='538' y='599' width='125' height='5' rx='3' fill='%23EAF7C8' opacity='0.17'/%3E%3Crect x='557' y='644' width='86' height='5' rx='3' fill='%23EAF7C8' opacity='0.12'/%3E%3Crect x='577' y='689' width='46' height='5' rx='3' fill='%23EAF7C8' opacity='0.08'/%3E%3Crect x='144' y='544' width='240' height='3' fill='%23EAF7C8' opacity='0.16'/%3E%3Crect x='744' y='624' width='312' height='3' fill='%23EAF7C8' opacity='0.12'/%3E%3C/svg%3E" alt="Abstract landscape: a green sky, a low sun and its reflection on flat water" width="1200" height="800" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232A1035'/%3E%3Cstop offset='1' stop-color='%23B4577A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Crect x='0' y='0' width='73' height='800' fill='%234A2050' opacity='0.9'/%3E%3Crect x='72' y='0' width='121' height='800' fill='%236A2F63' opacity='0.9'/%3E%3Crect x='192' y='0' width='49' height='800' fill='%23361540' opacity='0.9'/%3E%3Crect x='240' y='0' width='169' height='800' fill='%237A3560' opacity='0.9'/%3E%3Crect x='408' y='0' width='85' height='800' fill='%23491E52' opacity='0.9'/%3E%3Crect x='492' y='0' width='133' height='800' fill='%238A4070' opacity='0.9'/%3E%3Crect x='624' y='0' width='61' height='800' fill='%232A1030' opacity='0.9'/%3E%3Crect x='684' y='0' width='157' height='800' fill='%23643058' opacity='0.9'/%3E%3Crect x='840' y='0' width='97' height='800' fill='%23522358' opacity='0.9'/%3E%3Crect x='936' y='0' width='73' height='800' fill='%233C1743' opacity='0.9'/%3E%3Crect x='1008' y='0' width='109' height='800' fill='%23713A66' opacity='0.9'/%3E%3Crect x='1116' y='0' width='85' height='800' fill='%23451C4C' opacity='0.9'/%3E%3Crect y='496' width='1200' height='304' fill='%23120A1D' opacity='0.55'/%3E%3Ccircle cx='960' cy='160' r='56' fill='%23FFD9A0' opacity='0.85'/%3E%3C/svg%3E" data-iv-caption="Strata — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.">
    <img class="iv-gallery__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232A1035'/%3E%3Cstop offset='1' stop-color='%23B4577A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Crect x='0' y='0' width='73' height='800' fill='%234A2050' opacity='0.9'/%3E%3Crect x='72' y='0' width='121' height='800' fill='%236A2F63' opacity='0.9'/%3E%3Crect x='192' y='0' width='49' height='800' fill='%23361540' opacity='0.9'/%3E%3Crect x='240' y='0' width='169' height='800' fill='%237A3560' opacity='0.9'/%3E%3Crect x='408' y='0' width='85' height='800' fill='%23491E52' opacity='0.9'/%3E%3Crect x='492' y='0' width='133' height='800' fill='%238A4070' opacity='0.9'/%3E%3Crect x='624' y='0' width='61' height='800' fill='%232A1030' opacity='0.9'/%3E%3Crect x='684' y='0' width='157' height='800' fill='%23643058' opacity='0.9'/%3E%3Crect x='840' y='0' width='97' height='800' fill='%23522358' opacity='0.9'/%3E%3Crect x='936' y='0' width='73' height='800' fill='%233C1743' opacity='0.9'/%3E%3Crect x='1008' y='0' width='109' height='800' fill='%23713A66' opacity='0.9'/%3E%3Crect x='1116' y='0' width='85' height='800' fill='%23451C4C' opacity='0.9'/%3E%3Crect y='496' width='1200' height='304' fill='%23120A1D' opacity='0.55'/%3E%3Ccircle cx='960' cy='160' r='56' fill='%23FFD9A0' opacity='0.85'/%3E%3C/svg%3E" alt="Abstract landscape: vertical bands of plum and magenta stone" width="1200" height="800" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23101A2E'/%3E%3Cstop offset='1' stop-color='%2333506F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Cpath d='M0 240 Q 360 96 720 240 T 1200 208' stroke='%23DCE9F5' stroke-opacity='0.5' stroke-width='28' fill='none'/%3E%3Cpath d='M0 336 Q 420 192 792 352 T 1200 304' stroke='%238FB9E0' stroke-opacity='0.4' stroke-width='20' fill='none'/%3E%3Cpath d='M0 432 Q 336 320 696 448 T 1200 400' stroke='%23DCE9F5' stroke-opacity='0.22' stroke-width='12' fill='none'/%3E%3Cpath d='M0 624 L600 544 L1200 640 L1200 800 L0 800 Z' fill='%231D2B44'/%3E%3Cpath d='M0 720 L720 656 L1200 736 L1200 800 L0 800 Z' fill='%230B1220'/%3E%3C/svg%3E" data-iv-caption="Cold light — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.">
    <img class="iv-gallery__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23101A2E'/%3E%3Cstop offset='1' stop-color='%2333506F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Cpath d='M0 240 Q 360 96 720 240 T 1200 208' stroke='%23DCE9F5' stroke-opacity='0.5' stroke-width='28' fill='none'/%3E%3Cpath d='M0 336 Q 420 192 792 352 T 1200 304' stroke='%238FB9E0' stroke-opacity='0.4' stroke-width='20' fill='none'/%3E%3Cpath d='M0 432 Q 336 320 696 448 T 1200 400' stroke='%23DCE9F5' stroke-opacity='0.22' stroke-width='12' fill='none'/%3E%3Cpath d='M0 624 L600 544 L1200 640 L1200 800 L0 800 Z' fill='%231D2B44'/%3E%3Cpath d='M0 720 L720 656 L1200 736 L1200 800 L0 800 Z' fill='%230B1220'/%3E%3C/svg%3E" alt="Abstract landscape: pale bands of light over a slate plain" width="1200" height="800" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231B0E2B'/%3E%3Cstop offset='1' stop-color='%234B3E85'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Ccircle cx='96' cy='112' r='3' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='192' cy='240' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='312' cy='80' r='2.5' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='408' cy='176' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='528' cy='64' r='3' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='696' cy='144' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='840' cy='80' r='2.5' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='1008' cy='208' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='1104' cy='96' r='3' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='600' cy='240' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='264' cy='192' r='68' fill='%23C9C1FF' opacity='0.95'/%3E%3Cpath d='M0 800 L528 304 L864 624 L1032 496 L1200 800 Z' fill='%232A1C45'/%3E%3Cpath d='M528 304 L360 528 L696 528 Z' fill='%23C9C1FF' opacity='0.22'/%3E%3Cpath d='M0 800 L360 592 L744 768 L1200 672 L1200 800 Z' fill='%23120A1D'/%3E%3C/svg%3E" data-iv-caption="Night peak — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.">
    <img class="iv-gallery__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231B0E2B'/%3E%3Cstop offset='1' stop-color='%234B3E85'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Ccircle cx='96' cy='112' r='3' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='192' cy='240' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='312' cy='80' r='2.5' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='408' cy='176' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='528' cy='64' r='3' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='696' cy='144' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='840' cy='80' r='2.5' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='1008' cy='208' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='1104' cy='96' r='3' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='600' cy='240' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='264' cy='192' r='68' fill='%23C9C1FF' opacity='0.95'/%3E%3Cpath d='M0 800 L528 304 L864 624 L1032 496 L1200 800 Z' fill='%232A1C45'/%3E%3Cpath d='M528 304 L360 528 L696 528 Z' fill='%23C9C1FF' opacity='0.22'/%3E%3Cpath d='M0 800 L360 592 L744 768 L1200 672 L1200 800 Z' fill='%23120A1D'/%3E%3C/svg%3E" alt="Abstract landscape: a violet night, a pale moon and a single lit peak" width="1200" height="800" loading="lazy">
  </a>
</div>

<p class="iv-u-text-sm iv-u-text-muted iv-u-mt-6">Arrow keys change image, <kbd>Home</kbd> and <kbd>End</kbd> jump to the
ends, <kbd>Z</kbd> zooms, <kbd>Esc</kbd> closes and focus returns to the tile that opened the viewer.</p>
    // data-iv-component="lightbox"
{
  caption: "Blue hour — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.",
}
    Why this fixture cannot prove the no-script case

    Its tiles link to data: URLs, and browsers refuse a top-level navigation to data:. The gallery of photographs above is the honest demonstration: turn JavaScript off there and every tile still opens its image.

    Masonry and strip

    iv-gallery--masonry flows the tiles through CSS columns so each image keeps its own height; iv-gallery--strip lays them out as a single snapping row. A strip is a scroll region, so the author serves it tabindex="0", a role and a label — the same contract the horizontal timeline asks for.

    Masonry columnsfixtures/lightbox/masonry.htmlOpen alone — Masonry columns
    <p class="iv-u-m-0 iv-u-mb-6">The masonry modifier flows the same gallery through CSS columns, so every piece keeps
its own height. The artwork is sample vector art made for this fixture.</p>

<div class="iv-gallery iv-gallery--masonry" data-iv-component="lightbox">
  <a class="iv-gallery__item" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230B1E3A'/%3E%3Cstop offset='1' stop-color='%233E76A8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Ccircle cx='888' cy='176' r='72' fill='%23F6D77A' opacity='0.95'/%3E%3Cpath d='M0 528 L264 336 L552 544 L840 368 L1200 576 L1200 800 L0 800 Z' fill='%232A5E86' opacity='0.8'/%3E%3Cpath d='M0 640 L384 448 L744 672 L1032 512 L1200 656 L1200 800 L0 800 Z' fill='%23173A57'/%3E%3Cpath d='M0 720 L480 608 L888 752 L1200 672 L1200 800 L0 800 Z' fill='%230A1B2B'/%3E%3C/svg%3E" data-iv-caption="Blue hour — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.">
    <img class="iv-gallery__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230B1E3A'/%3E%3Cstop offset='1' stop-color='%233E76A8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Ccircle cx='888' cy='176' r='72' fill='%23F6D77A' opacity='0.95'/%3E%3Cpath d='M0 528 L264 336 L552 544 L840 368 L1200 576 L1200 800 L0 800 Z' fill='%232A5E86' opacity='0.8'/%3E%3Cpath d='M0 640 L384 448 L744 672 L1032 512 L1200 656 L1200 800 L0 800 Z' fill='%23173A57'/%3E%3Cpath d='M0 720 L480 608 L888 752 L1200 672 L1200 800 L0 800 Z' fill='%230A1B2B'/%3E%3C/svg%3E" alt="Abstract landscape: a pale sun over three layered blue ridges" width="1200" height="800" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1500' width='1200' height='1500'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233A1C06'/%3E%3Cstop offset='1' stop-color='%23E2A253'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='1500' fill='url(%23s)'/%3E%3Ccircle cx='360' cy='870' r='195' fill='%23FFE9B0' opacity='0.9'/%3E%3Cpath d='M0 990 Q 360 750 660 1020 T 1200 930 L1200 1500 L0 1500 Z' fill='%23A8621F' opacity='0.85'/%3E%3Cpath d='M0 1200 Q 300 990 624 1230 T 1200 1140 L1200 1500 L0 1500 Z' fill='%235A2C0E'/%3E%3Cpath d='M0 1395 Q 456 1230 840 1425 T 1200 1350 L1200 1500 L0 1500 Z' fill='%232A1405'/%3E%3C/svg%3E" data-iv-caption="Dunes — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.">
    <img class="iv-gallery__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1500' width='1200' height='1500'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233A1C06'/%3E%3Cstop offset='1' stop-color='%23E2A253'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='1500' fill='url(%23s)'/%3E%3Ccircle cx='360' cy='870' r='195' fill='%23FFE9B0' opacity='0.9'/%3E%3Cpath d='M0 990 Q 360 750 660 1020 T 1200 930 L1200 1500 L0 1500 Z' fill='%23A8621F' opacity='0.85'/%3E%3Cpath d='M0 1200 Q 300 990 624 1230 T 1200 1140 L1200 1500 L0 1500 Z' fill='%235A2C0E'/%3E%3Cpath d='M0 1395 Q 456 1230 840 1425 T 1200 1350 L1200 1500 L0 1500 Z' fill='%232A1405'/%3E%3C/svg%3E" alt="Abstract landscape: warm dunes curving under a low amber sun" width="1200" height="1500" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' width='1200' height='700'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2304261F'/%3E%3Cstop offset='1' stop-color='%234FA98A'/%3E%3C/linearGradient%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2306302A'/%3E%3Cstop offset='1' stop-color='%23021512'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='700' fill='url(%23s)'/%3E%3Ccircle cx='600' cy='308' r='70' fill='%23EAF7C8' opacity='0.92'/%3E%3Crect y='392' width='1200' height='308' fill='url(%23w)'/%3E%3Crect x='478' y='406' width='244' height='5' rx='3' fill='%23EAF7C8' opacity='0.34'/%3E%3Crect x='498' y='445' width='205' height='5' rx='3' fill='%23EAF7C8' opacity='0.28'/%3E%3Crect x='518' y='484' width='165' height='5' rx='3' fill='%23EAF7C8' opacity='0.22'/%3E%3Crect x='538' y='523' width='125' height='5' rx='3' fill='%23EAF7C8' opacity='0.17'/%3E%3Crect x='557' y='562' width='86' height='5' rx='3' fill='%23EAF7C8' opacity='0.12'/%3E%3Crect x='577' y='601' width='46' height='5' rx='3' fill='%23EAF7C8' opacity='0.08'/%3E%3Crect x='144' y='476' width='240' height='3' fill='%23EAF7C8' opacity='0.16'/%3E%3Crect x='744' y='546' width='312' height='3' fill='%23EAF7C8' opacity='0.12'/%3E%3C/svg%3E" data-iv-caption="Still water — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.">
    <img class="iv-gallery__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' width='1200' height='700'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2304261F'/%3E%3Cstop offset='1' stop-color='%234FA98A'/%3E%3C/linearGradient%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2306302A'/%3E%3Cstop offset='1' stop-color='%23021512'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='700' fill='url(%23s)'/%3E%3Ccircle cx='600' cy='308' r='70' fill='%23EAF7C8' opacity='0.92'/%3E%3Crect y='392' width='1200' height='308' fill='url(%23w)'/%3E%3Crect x='478' y='406' width='244' height='5' rx='3' fill='%23EAF7C8' opacity='0.34'/%3E%3Crect x='498' y='445' width='205' height='5' rx='3' fill='%23EAF7C8' opacity='0.28'/%3E%3Crect x='518' y='484' width='165' height='5' rx='3' fill='%23EAF7C8' opacity='0.22'/%3E%3Crect x='538' y='523' width='125' height='5' rx='3' fill='%23EAF7C8' opacity='0.17'/%3E%3Crect x='557' y='562' width='86' height='5' rx='3' fill='%23EAF7C8' opacity='0.12'/%3E%3Crect x='577' y='601' width='46' height='5' rx='3' fill='%23EAF7C8' opacity='0.08'/%3E%3Crect x='144' y='476' width='240' height='3' fill='%23EAF7C8' opacity='0.16'/%3E%3Crect x='744' y='546' width='312' height='3' fill='%23EAF7C8' opacity='0.12'/%3E%3C/svg%3E" alt="Abstract landscape: a green sky, a low sun and its reflection on flat water" width="1200" height="700" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200' width='1200' height='1200'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232A1035'/%3E%3Cstop offset='1' stop-color='%23B4577A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='1200' fill='url(%23s)'/%3E%3Crect x='0' y='0' width='73' height='1200' fill='%234A2050' opacity='0.9'/%3E%3Crect x='72' y='0' width='121' height='1200' fill='%236A2F63' opacity='0.9'/%3E%3Crect x='192' y='0' width='49' height='1200' fill='%23361540' opacity='0.9'/%3E%3Crect x='240' y='0' width='169' height='1200' fill='%237A3560' opacity='0.9'/%3E%3Crect x='408' y='0' width='85' height='1200' fill='%23491E52' opacity='0.9'/%3E%3Crect x='492' y='0' width='133' height='1200' fill='%238A4070' opacity='0.9'/%3E%3Crect x='624' y='0' width='61' height='1200' fill='%232A1030' opacity='0.9'/%3E%3Crect x='684' y='0' width='157' height='1200' fill='%23643058' opacity='0.9'/%3E%3Crect x='840' y='0' width='97' height='1200' fill='%23522358' opacity='0.9'/%3E%3Crect x='936' y='0' width='73' height='1200' fill='%233C1743' opacity='0.9'/%3E%3Crect x='1008' y='0' width='109' height='1200' fill='%23713A66' opacity='0.9'/%3E%3Crect x='1116' y='0' width='85' height='1200' fill='%23451C4C' opacity='0.9'/%3E%3Crect y='744' width='1200' height='456' fill='%23120A1D' opacity='0.55'/%3E%3Ccircle cx='960' cy='240' r='84' fill='%23FFD9A0' opacity='0.85'/%3E%3C/svg%3E" data-iv-caption="Strata — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.">
    <img class="iv-gallery__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200' width='1200' height='1200'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232A1035'/%3E%3Cstop offset='1' stop-color='%23B4577A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='1200' fill='url(%23s)'/%3E%3Crect x='0' y='0' width='73' height='1200' fill='%234A2050' opacity='0.9'/%3E%3Crect x='72' y='0' width='121' height='1200' fill='%236A2F63' opacity='0.9'/%3E%3Crect x='192' y='0' width='49' height='1200' fill='%23361540' opacity='0.9'/%3E%3Crect x='240' y='0' width='169' height='1200' fill='%237A3560' opacity='0.9'/%3E%3Crect x='408' y='0' width='85' height='1200' fill='%23491E52' opacity='0.9'/%3E%3Crect x='492' y='0' width='133' height='1200' fill='%238A4070' opacity='0.9'/%3E%3Crect x='624' y='0' width='61' height='1200' fill='%232A1030' opacity='0.9'/%3E%3Crect x='684' y='0' width='157' height='1200' fill='%23643058' opacity='0.9'/%3E%3Crect x='840' y='0' width='97' height='1200' fill='%23522358' opacity='0.9'/%3E%3Crect x='936' y='0' width='73' height='1200' fill='%233C1743' opacity='0.9'/%3E%3Crect x='1008' y='0' width='109' height='1200' fill='%23713A66' opacity='0.9'/%3E%3Crect x='1116' y='0' width='85' height='1200' fill='%23451C4C' opacity='0.9'/%3E%3Crect y='744' width='1200' height='456' fill='%23120A1D' opacity='0.55'/%3E%3Ccircle cx='960' cy='240' r='84' fill='%23FFD9A0' opacity='0.85'/%3E%3C/svg%3E" alt="Abstract landscape: vertical bands of plum and magenta stone" width="1200" height="1200" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 900' width='1200' height='900'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23101A2E'/%3E%3Cstop offset='1' stop-color='%2333506F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='900' fill='url(%23s)'/%3E%3Cpath d='M0 270 Q 360 108 720 270 T 1200 234' stroke='%23DCE9F5' stroke-opacity='0.5' stroke-width='32' fill='none'/%3E%3Cpath d='M0 378 Q 420 216 792 396 T 1200 342' stroke='%238FB9E0' stroke-opacity='0.4' stroke-width='22' fill='none'/%3E%3Cpath d='M0 486 Q 336 360 696 504 T 1200 450' stroke='%23DCE9F5' stroke-opacity='0.22' stroke-width='14' fill='none'/%3E%3Cpath d='M0 702 L600 612 L1200 720 L1200 900 L0 900 Z' fill='%231D2B44'/%3E%3Cpath d='M0 810 L720 738 L1200 828 L1200 900 L0 900 Z' fill='%230B1220'/%3E%3C/svg%3E" data-iv-caption="Cold light — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.">
    <img class="iv-gallery__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 900' width='1200' height='900'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23101A2E'/%3E%3Cstop offset='1' stop-color='%2333506F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='900' fill='url(%23s)'/%3E%3Cpath d='M0 270 Q 360 108 720 270 T 1200 234' stroke='%23DCE9F5' stroke-opacity='0.5' stroke-width='32' fill='none'/%3E%3Cpath d='M0 378 Q 420 216 792 396 T 1200 342' stroke='%238FB9E0' stroke-opacity='0.4' stroke-width='22' fill='none'/%3E%3Cpath d='M0 486 Q 336 360 696 504 T 1200 450' stroke='%23DCE9F5' stroke-opacity='0.22' stroke-width='14' fill='none'/%3E%3Cpath d='M0 702 L600 612 L1200 720 L1200 900 L0 900 Z' fill='%231D2B44'/%3E%3Cpath d='M0 810 L720 738 L1200 828 L1200 900 L0 900 Z' fill='%230B1220'/%3E%3C/svg%3E" alt="Abstract landscape: pale bands of light over a slate plain" width="1200" height="900" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1400' width='1200' height='1400'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231B0E2B'/%3E%3Cstop offset='1' stop-color='%234B3E85'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='1400' fill='url(%23s)'/%3E%3Ccircle cx='96' cy='196' r='3' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='192' cy='420' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='312' cy='140' r='2.5' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='408' cy='308' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='528' cy='112' r='3' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='696' cy='252' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='840' cy='140' r='2.5' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='1008' cy='364' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='1104' cy='168' r='3' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='600' cy='420' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='264' cy='336' r='119' fill='%23C9C1FF' opacity='0.95'/%3E%3Cpath d='M0 1400 L528 532 L864 1092 L1032 868 L1200 1400 Z' fill='%232A1C45'/%3E%3Cpath d='M528 532 L360 924 L696 924 Z' fill='%23C9C1FF' opacity='0.22'/%3E%3Cpath d='M0 1400 L360 1036 L744 1344 L1200 1176 L1200 1400 Z' fill='%23120A1D'/%3E%3C/svg%3E" data-iv-caption="Night peak — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.">
    <img class="iv-gallery__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1400' width='1200' height='1400'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231B0E2B'/%3E%3Cstop offset='1' stop-color='%234B3E85'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='1400' fill='url(%23s)'/%3E%3Ccircle cx='96' cy='196' r='3' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='192' cy='420' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='312' cy='140' r='2.5' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='408' cy='308' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='528' cy='112' r='3' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='696' cy='252' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='840' cy='140' r='2.5' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='1008' cy='364' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='1104' cy='168' r='3' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='600' cy='420' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='264' cy='336' r='119' fill='%23C9C1FF' opacity='0.95'/%3E%3Cpath d='M0 1400 L528 532 L864 1092 L1032 868 L1200 1400 Z' fill='%232A1C45'/%3E%3Cpath d='M528 532 L360 924 L696 924 Z' fill='%23C9C1FF' opacity='0.22'/%3E%3Cpath d='M0 1400 L360 1036 L744 1344 L1200 1176 L1200 1400 Z' fill='%23120A1D'/%3E%3C/svg%3E" alt="Abstract landscape: a violet night, a pale moon and a single lit peak" width="1200" height="1400" loading="lazy">
  </a>
</div>
    // data-iv-component="lightbox"
{
  caption: "Blue hour — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.",
}
    A snapping stripfixtures/lightbox/strip.htmlOpen alone — A snapping strip
    <p class="iv-u-m-0 iv-u-mb-6">The strip modifier lays the gallery out as one snapping row. The author serves
<code>tabindex="0"</code>, a role and a label on the container so the scroll region is reachable from the keyboard.</p>

<div class="iv-gallery iv-gallery--strip" data-iv-component="lightbox" tabindex="0" role="group" aria-label="Sample artwork, scrollable gallery">
  <a class="iv-gallery__item" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230B1E3A'/%3E%3Cstop offset='1' stop-color='%233E76A8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Ccircle cx='888' cy='176' r='72' fill='%23F6D77A' opacity='0.95'/%3E%3Cpath d='M0 528 L264 336 L552 544 L840 368 L1200 576 L1200 800 L0 800 Z' fill='%232A5E86' opacity='0.8'/%3E%3Cpath d='M0 640 L384 448 L744 672 L1032 512 L1200 656 L1200 800 L0 800 Z' fill='%23173A57'/%3E%3Cpath d='M0 720 L480 608 L888 752 L1200 672 L1200 800 L0 800 Z' fill='%230A1B2B'/%3E%3C/svg%3E" data-iv-caption="Blue hour — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.">
    <img class="iv-gallery__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230B1E3A'/%3E%3Cstop offset='1' stop-color='%233E76A8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Ccircle cx='888' cy='176' r='72' fill='%23F6D77A' opacity='0.95'/%3E%3Cpath d='M0 528 L264 336 L552 544 L840 368 L1200 576 L1200 800 L0 800 Z' fill='%232A5E86' opacity='0.8'/%3E%3Cpath d='M0 640 L384 448 L744 672 L1032 512 L1200 656 L1200 800 L0 800 Z' fill='%23173A57'/%3E%3Cpath d='M0 720 L480 608 L888 752 L1200 672 L1200 800 L0 800 Z' fill='%230A1B2B'/%3E%3C/svg%3E" alt="Abstract landscape: a pale sun over three layered blue ridges" width="1200" height="800" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233A1C06'/%3E%3Cstop offset='1' stop-color='%23E2A253'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Ccircle cx='360' cy='464' r='104' fill='%23FFE9B0' opacity='0.9'/%3E%3Cpath d='M0 528 Q 360 400 660 544 T 1200 496 L1200 800 L0 800 Z' fill='%23A8621F' opacity='0.85'/%3E%3Cpath d='M0 640 Q 300 528 624 656 T 1200 608 L1200 800 L0 800 Z' fill='%235A2C0E'/%3E%3Cpath d='M0 744 Q 456 656 840 760 T 1200 720 L1200 800 L0 800 Z' fill='%232A1405'/%3E%3C/svg%3E" data-iv-caption="Dunes — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.">
    <img class="iv-gallery__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233A1C06'/%3E%3Cstop offset='1' stop-color='%23E2A253'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Ccircle cx='360' cy='464' r='104' fill='%23FFE9B0' opacity='0.9'/%3E%3Cpath d='M0 528 Q 360 400 660 544 T 1200 496 L1200 800 L0 800 Z' fill='%23A8621F' opacity='0.85'/%3E%3Cpath d='M0 640 Q 300 528 624 656 T 1200 608 L1200 800 L0 800 Z' fill='%235A2C0E'/%3E%3Cpath d='M0 744 Q 456 656 840 760 T 1200 720 L1200 800 L0 800 Z' fill='%232A1405'/%3E%3C/svg%3E" alt="Abstract landscape: warm dunes curving under a low amber sun" width="1200" height="800" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2304261F'/%3E%3Cstop offset='1' stop-color='%234FA98A'/%3E%3C/linearGradient%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2306302A'/%3E%3Cstop offset='1' stop-color='%23021512'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Ccircle cx='600' cy='352' r='80' fill='%23EAF7C8' opacity='0.92'/%3E%3Crect y='448' width='1200' height='352' fill='url(%23w)'/%3E%3Crect x='478' y='464' width='244' height='5' rx='3' fill='%23EAF7C8' opacity='0.34'/%3E%3Crect x='498' y='509' width='205' height='5' rx='3' fill='%23EAF7C8' opacity='0.28'/%3E%3Crect x='518' y='554' width='165' height='5' rx='3' fill='%23EAF7C8' opacity='0.22'/%3E%3Crect x='538' y='599' width='125' height='5' rx='3' fill='%23EAF7C8' opacity='0.17'/%3E%3Crect x='557' y='644' width='86' height='5' rx='3' fill='%23EAF7C8' opacity='0.12'/%3E%3Crect x='577' y='689' width='46' height='5' rx='3' fill='%23EAF7C8' opacity='0.08'/%3E%3Crect x='144' y='544' width='240' height='3' fill='%23EAF7C8' opacity='0.16'/%3E%3Crect x='744' y='624' width='312' height='3' fill='%23EAF7C8' opacity='0.12'/%3E%3C/svg%3E" data-iv-caption="Still water — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.">
    <img class="iv-gallery__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2304261F'/%3E%3Cstop offset='1' stop-color='%234FA98A'/%3E%3C/linearGradient%3E%3ClinearGradient id='w' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2306302A'/%3E%3Cstop offset='1' stop-color='%23021512'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Ccircle cx='600' cy='352' r='80' fill='%23EAF7C8' opacity='0.92'/%3E%3Crect y='448' width='1200' height='352' fill='url(%23w)'/%3E%3Crect x='478' y='464' width='244' height='5' rx='3' fill='%23EAF7C8' opacity='0.34'/%3E%3Crect x='498' y='509' width='205' height='5' rx='3' fill='%23EAF7C8' opacity='0.28'/%3E%3Crect x='518' y='554' width='165' height='5' rx='3' fill='%23EAF7C8' opacity='0.22'/%3E%3Crect x='538' y='599' width='125' height='5' rx='3' fill='%23EAF7C8' opacity='0.17'/%3E%3Crect x='557' y='644' width='86' height='5' rx='3' fill='%23EAF7C8' opacity='0.12'/%3E%3Crect x='577' y='689' width='46' height='5' rx='3' fill='%23EAF7C8' opacity='0.08'/%3E%3Crect x='144' y='544' width='240' height='3' fill='%23EAF7C8' opacity='0.16'/%3E%3Crect x='744' y='624' width='312' height='3' fill='%23EAF7C8' opacity='0.12'/%3E%3C/svg%3E" alt="Abstract landscape: a green sky, a low sun and its reflection on flat water" width="1200" height="800" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232A1035'/%3E%3Cstop offset='1' stop-color='%23B4577A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Crect x='0' y='0' width='73' height='800' fill='%234A2050' opacity='0.9'/%3E%3Crect x='72' y='0' width='121' height='800' fill='%236A2F63' opacity='0.9'/%3E%3Crect x='192' y='0' width='49' height='800' fill='%23361540' opacity='0.9'/%3E%3Crect x='240' y='0' width='169' height='800' fill='%237A3560' opacity='0.9'/%3E%3Crect x='408' y='0' width='85' height='800' fill='%23491E52' opacity='0.9'/%3E%3Crect x='492' y='0' width='133' height='800' fill='%238A4070' opacity='0.9'/%3E%3Crect x='624' y='0' width='61' height='800' fill='%232A1030' opacity='0.9'/%3E%3Crect x='684' y='0' width='157' height='800' fill='%23643058' opacity='0.9'/%3E%3Crect x='840' y='0' width='97' height='800' fill='%23522358' opacity='0.9'/%3E%3Crect x='936' y='0' width='73' height='800' fill='%233C1743' opacity='0.9'/%3E%3Crect x='1008' y='0' width='109' height='800' fill='%23713A66' opacity='0.9'/%3E%3Crect x='1116' y='0' width='85' height='800' fill='%23451C4C' opacity='0.9'/%3E%3Crect y='496' width='1200' height='304' fill='%23120A1D' opacity='0.55'/%3E%3Ccircle cx='960' cy='160' r='56' fill='%23FFD9A0' opacity='0.85'/%3E%3C/svg%3E" data-iv-caption="Strata — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.">
    <img class="iv-gallery__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232A1035'/%3E%3Cstop offset='1' stop-color='%23B4577A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Crect x='0' y='0' width='73' height='800' fill='%234A2050' opacity='0.9'/%3E%3Crect x='72' y='0' width='121' height='800' fill='%236A2F63' opacity='0.9'/%3E%3Crect x='192' y='0' width='49' height='800' fill='%23361540' opacity='0.9'/%3E%3Crect x='240' y='0' width='169' height='800' fill='%237A3560' opacity='0.9'/%3E%3Crect x='408' y='0' width='85' height='800' fill='%23491E52' opacity='0.9'/%3E%3Crect x='492' y='0' width='133' height='800' fill='%238A4070' opacity='0.9'/%3E%3Crect x='624' y='0' width='61' height='800' fill='%232A1030' opacity='0.9'/%3E%3Crect x='684' y='0' width='157' height='800' fill='%23643058' opacity='0.9'/%3E%3Crect x='840' y='0' width='97' height='800' fill='%23522358' opacity='0.9'/%3E%3Crect x='936' y='0' width='73' height='800' fill='%233C1743' opacity='0.9'/%3E%3Crect x='1008' y='0' width='109' height='800' fill='%23713A66' opacity='0.9'/%3E%3Crect x='1116' y='0' width='85' height='800' fill='%23451C4C' opacity='0.9'/%3E%3Crect y='496' width='1200' height='304' fill='%23120A1D' opacity='0.55'/%3E%3Ccircle cx='960' cy='160' r='56' fill='%23FFD9A0' opacity='0.85'/%3E%3C/svg%3E" alt="Abstract landscape: vertical bands of plum and magenta stone" width="1200" height="800" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23101A2E'/%3E%3Cstop offset='1' stop-color='%2333506F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Cpath d='M0 240 Q 360 96 720 240 T 1200 208' stroke='%23DCE9F5' stroke-opacity='0.5' stroke-width='28' fill='none'/%3E%3Cpath d='M0 336 Q 420 192 792 352 T 1200 304' stroke='%238FB9E0' stroke-opacity='0.4' stroke-width='20' fill='none'/%3E%3Cpath d='M0 432 Q 336 320 696 448 T 1200 400' stroke='%23DCE9F5' stroke-opacity='0.22' stroke-width='12' fill='none'/%3E%3Cpath d='M0 624 L600 544 L1200 640 L1200 800 L0 800 Z' fill='%231D2B44'/%3E%3Cpath d='M0 720 L720 656 L1200 736 L1200 800 L0 800 Z' fill='%230B1220'/%3E%3C/svg%3E" data-iv-caption="Cold light — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.">
    <img class="iv-gallery__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23101A2E'/%3E%3Cstop offset='1' stop-color='%2333506F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Cpath d='M0 240 Q 360 96 720 240 T 1200 208' stroke='%23DCE9F5' stroke-opacity='0.5' stroke-width='28' fill='none'/%3E%3Cpath d='M0 336 Q 420 192 792 352 T 1200 304' stroke='%238FB9E0' stroke-opacity='0.4' stroke-width='20' fill='none'/%3E%3Cpath d='M0 432 Q 336 320 696 448 T 1200 400' stroke='%23DCE9F5' stroke-opacity='0.22' stroke-width='12' fill='none'/%3E%3Cpath d='M0 624 L600 544 L1200 640 L1200 800 L0 800 Z' fill='%231D2B44'/%3E%3Cpath d='M0 720 L720 656 L1200 736 L1200 800 L0 800 Z' fill='%230B1220'/%3E%3C/svg%3E" alt="Abstract landscape: pale bands of light over a slate plain" width="1200" height="800" loading="lazy">
  </a>
  <a class="iv-gallery__item" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231B0E2B'/%3E%3Cstop offset='1' stop-color='%234B3E85'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Ccircle cx='96' cy='112' r='3' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='192' cy='240' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='312' cy='80' r='2.5' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='408' cy='176' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='528' cy='64' r='3' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='696' cy='144' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='840' cy='80' r='2.5' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='1008' cy='208' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='1104' cy='96' r='3' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='600' cy='240' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='264' cy='192' r='68' fill='%23C9C1FF' opacity='0.95'/%3E%3Cpath d='M0 800 L528 304 L864 624 L1032 496 L1200 800 Z' fill='%232A1C45'/%3E%3Cpath d='M528 304 L360 528 L696 528 Z' fill='%23C9C1FF' opacity='0.22'/%3E%3Cpath d='M0 800 L360 592 L744 768 L1200 672 L1200 800 Z' fill='%23120A1D'/%3E%3C/svg%3E" data-iv-caption="Night peak — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.">
    <img class="iv-gallery__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' width='1200' height='800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231B0E2B'/%3E%3Cstop offset='1' stop-color='%234B3E85'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url(%23s)'/%3E%3Ccircle cx='96' cy='112' r='3' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='192' cy='240' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='312' cy='80' r='2.5' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='408' cy='176' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='528' cy='64' r='3' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='696' cy='144' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='840' cy='80' r='2.5' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='1008' cy='208' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='1104' cy='96' r='3' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='600' cy='240' r='2' fill='%23FFFFFF' opacity='0.7'/%3E%3Ccircle cx='264' cy='192' r='68' fill='%23C9C1FF' opacity='0.95'/%3E%3Cpath d='M0 800 L528 304 L864 624 L1032 496 L1200 800 Z' fill='%232A1C45'/%3E%3Cpath d='M528 304 L360 528 L696 528 Z' fill='%23C9C1FF' opacity='0.22'/%3E%3Cpath d='M0 800 L360 592 L744 768 L1200 672 L1200 800 Z' fill='%23120A1D'/%3E%3C/svg%3E" alt="Abstract landscape: a violet night, a pale moon and a single lit peak" width="1200" height="800" loading="lazy">
  </a>
</div>
    // data-iv-component="lightbox"
{
  caption: "Blue hour — sample artwork for the fixture, drawn as inline SVG; no photograph is shipped with the package.",
}

    Options

    OptionAttributeDefaultEffect
    loopdata-iv-looptrueThe last image steps to the first and back.
    zoomdata-iv-zoomtrueOffer the zoom button and the Z key.
    swipedata-iv-swipetrueA horizontal drag changes image, at the same threshold as the carousel.
    preloaddata-iv-preload1How many neighbours on each side are fetched ahead.
    counterdata-iv-countertrueShow “3 / 12” in a polite live region.
    captionsdata-iv-captionstrueRender data-iv-caption as the <figcaption> of the stage.
    galleryLabeldata-iv-gallery-labelImage viewerAccessible name of the generated dialog.
    closeText, prevText, nextText, zoomTextdata-iv-close-text…Close, Previous, Next, ZoomNames of the four buttons. Translate them, do not remove them.

    Methods and events

    open(index), close(), next(), prev(), go(index), zoom(on?), destroy(); read index, isOpen, items, zoomed and dialog. destroy() removes the generated dialog and every listener, and the gallery goes back to being a list of links.

    EventWhendetail
    iv:open → iv:openedthe viewer opens; the first is cancelableindex, reason
    iv:close → iv:closedthe viewer closesindex, reason: escape, backdrop, trigger or api
    iv:change → iv:changedanother image takes the stage; the first is cancelableindex, previousIndex, reason: next, prev, keyboard, swipe or api
    iv:zoomthe stage enters or leaves the zoomzoomed, index

    All of them fire on the gallery root, not on the generated dialog, so one listener covers a gallery whatever the viewer does.

    Keyboard and assistive technology

    Tiles are links: Tab reaches them and Enter opens the viewer. Inside it, Esc closes, ← and → change image, Home and End jump to the ends and Z toggles the zoom. The dialog carries a name, the four buttons carry names, the counter lives in aria-live="polite" and the caption is a real <figcaption>. The image on stage keeps the alt of the tile that opened it, so nothing is described twice and nothing is left undescribed.

    Zoomed, the stage becomes a focusable scroll region: it takes tabindex="0" and hands the arrow keys back to the browser so they pan the enlarged photograph, which is what a keyboard user needs there. Image changes wait until the zoom is off. The page behind never scrolls; only the stage does.

    Without JavaScript

    The gallery is complete. The grid, the masonry columns, the strip, the hover scale and the focus ring are CSS; the tiles are links to full images. Nothing is hidden behind the script, and nothing about the page depends on the viewer existing — it is an upgrade to a set of links that already worked.

    Tokens and locals

    LocalDefaultWhat it moves
    --iv-gallery-min14remNarrowest a tile may get before the grid drops a column.
    --iv-gallery-gapvar(--iv-space-3)Space between tiles.
    --iv-gallery-ratio3 / 2Aspect ratio of a tile in the grid and in the strip.
    --iv-gallery-radiusvar(--iv-radius-lg)Corner of a tile.
    --iv-gallery-scrimveil tokenDarkness of the veil that carries the enlarge icon.
    --iv-lightbox-chip-bg, -border, -highlight, -textanchored to the paletteThe chips of the viewer: close, arrows, zoom, counter and caption.
    --iv-lightbox-icon-size, -strokeicon defaultsSize and weight of the chevrons and the glyphs.

    The chips do not take the glass of the current theme: they are anchored to the palette so the viewer is a dark room in light mode as well as in dark, and the buttons keep their contrast over any photograph. The backdrop is mixed from the darkest neutral at 92 % with literal fallbacks, because not every engine inherits custom properties into ::backdrop. Under reduced motion the crossfade and the entry scale are dropped; the viewer still opens, changes and closes.

    Common mistakes

    • Linking the tile to the page instead of the image, or to #. The link is the no-script path; point it at the full file.
    • Serving the thumbnail as the full image. The tile can be small and the href large; that is the point of the pair.
    • Repeating the caption in the alt. The alt describes the picture, the caption credits and comments it.
    • A strip without tabindex="0", a role and a label: a scroll region a keyboard cannot reach.
    • Expecting one viewer for two galleries. Each gallery builds its own; the same image may appear in both.

    Class index

    Parts and modifiers of this family that the examples above do not show. The full list per stylesheet lives in the reference.

    ClassWhat it does
    iv-lightbox__panelDialog panel the viewer builds on open.
    iv-lightbox__stageArea that holds the image and receives the gestures.
    iv-lightbox__imgThe image on show; its alt comes from the gallery item.
    iv-lightbox__buttonShared base of the viewer buttons.
    iv-lightbox__closeClose button; its label is the closeText option.
    iv-lightbox__prevPrevious image; label from prevText.
    iv-lightbox__nextNext image; label from nextText.
    iv-lightbox__zoomZoom toggle; label from zoomText.
    iv-lightbox__counterPosition indicator, written as index / total.