Galería y visor

Una galería es una lista de enlaces a imágenes. Ese es todo el marcado y eso es lo que envía el servidor: pulsa una miniatura sin JavaScript y el navegador muestra la fotografía completa, porque la miniatura es un <a href> que apunta a ella. En init el componente construye un visor por galería, se lo entrega a Dialog para la capa superior, la trampa de foco, Escape y la devolución del foco, y a partir de ahí un clic abre la imagen en su sitio con su pie, un contador, flechas, zoom y gesto.

CSS: css/components/lightbox.css (en ivolt.css). JS: @intervolutions/ivolt/lightbox o auto.js. Añadido en v0.7.

Fotografías, con el visorfixtures/lightbox/photos.htmlAbrir sola

<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.",
}

Una galería de fotografías

Las seis miniaturas del escenario de arriba son fotografías reales servidas por este sitio, cada una enlazada a su propio archivo. Abre una: el visor ocupa la ventana, el pie nombra a quien la hizo y las flechas recorren el conjunto. Pulsa Escape y el foco vuelve a la miniatura de la que saliste.

Fotografías de Andrew Ridley, Wolfgang Lutz, Christian Joudrey, Joseph Barrientos, veeterzy y Jay Ruzesky en Unsplash, usadas aquí como material de documentación. El paquete npm no lleva mapas de bits: las fixtures de abajo dibujan su arte como SVG en línea.

La fixture del paquete

La misma galería con el arte que lleva el paquete. Cada pie dice lo que es y las miniaturas enlazan al dibujo, no a una fotografía.

Galería y visorfixtures/lightbox/basic.htmlAbrir sola

<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.",
}

Por qué esta fixture no demuestra el caso sin script

Sus miniaturas enlazan a URL data:, y los navegadores bloquean la navegación superior a data:. La galería de fotografías de arriba es la demostración honesta: desactiva JavaScript allí y cada miniatura sigue abriendo su imagen.

Mosaico y tira

iv-gallery--masonry reparte las miniaturas en columnas CSS para que cada imagen conserve su altura; iv-gallery--strip las coloca en una sola fila con anclaje de scroll. Una tira es una región desplazable, así que el autor le sirve tabindex="0", un rol y una etiqueta: el mismo contrato que pide la línea de tiempo horizontal.

Columnas de mosaicofixtures/lightbox/masonry.htmlAbrir sola

<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.",
}

Una tira con anclajefixtures/lightbox/strip.htmlAbrir sola

<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.",
}

Opciones

Opción	Atributo	Por defecto	Efecto
`loop`	`data-iv-loop`	`true`	De la última imagen se pasa a la primera y al revés.
`zoom`	`data-iv-zoom`	`true`	Ofrece el botón de zoom y la tecla `Z`.
`swipe`	`data-iv-swipe`	`true`	Un arrastre horizontal cambia de imagen, con el mismo umbral que el carrusel.
`preload`	`data-iv-preload`	`1`	Cuántas vecinas por lado se piden por adelantado.
`counter`	`data-iv-counter`	`true`	Muestra «3 / 12» en una región viva cortés.
`captions`	`data-iv-captions`	`true`	Pinta `data-iv-caption` como `<figcaption>` del escenario.
`galleryLabel`	`data-iv-gallery-label`	`Image viewer`	Nombre accesible del diálogo generado.
`closeText`, `prevText`, `nextText`, `zoomText`	`data-iv-close-text`…	`Close`, `Previous`, `Next`, `Zoom`	Nombres de los cuatro botones. Tradúcelos; no los quites.

Métodos y eventos

open(index), close(), next(), prev(), go(index), zoom(on?), destroy(); se leen index, isOpen, items, zoomed y dialog. destroy() retira el diálogo generado y todos los escuchadores, y la galería vuelve a ser una lista de enlaces.

Evento	Cuándo	`detail`
`iv:open` → `iv:opened`	el visor se abre; el primero es cancelable	`index`, `reason`
`iv:close` → `iv:closed`	el visor se cierra	`index`, `reason`: `escape`, `backdrop`, `trigger` o `api`
`iv:change` → `iv:changed`	otra imagen toma el escenario; el primero es cancelable	`index`, `previousIndex`, `reason`: `next`, `prev`, `keyboard`, `swipe` o `api`
`iv:zoom`	el escenario entra o sale del zoom	`zoomed`, `index`

Todos se disparan en la raíz de la galería, no en el diálogo generado, así que un solo escuchador cubre una galería haga lo que haga el visor.

Teclado y tecnología asistiva

Las miniaturas son enlaces: el tabulador llega a ellas y Enter abre el visor. Dentro, Esc cierra, ← y → cambian de imagen, Inicio y Fin van a los extremos y Z alterna el zoom. El diálogo tiene nombre, los cuatro botones tienen nombre, el contador vive en aria-live="polite" y el pie es un <figcaption> de verdad. La imagen en escena conserva el alt de la miniatura que la abrió, así que nada se describe dos veces y nada se queda sin describir.

Con zoom, el escenario pasa a ser una región desplazable enfocable: recibe tabindex="0" y devuelve las flechas al navegador para desplazar la fotografía ampliada, que es lo que necesita ahí quien usa teclado. El cambio de imagen espera a que el zoom se apague. La página de detrás no se desplaza nunca; solo el escenario.

Sin JavaScript

La galería está completa. La rejilla, las columnas del mosaico, la tira, la escala al pasar y el anillo de foco son CSS; las miniaturas son enlaces a las imágenes completas. No hay nada escondido detrás del script y nada de la página depende de que el visor exista: es una mejora sobre un conjunto de enlaces que ya funcionaba.

Tokens y locales

Local	Por defecto	Qué mueve
`--iv-gallery-min`	`14rem`	Lo más estrecha que puede quedar una miniatura antes de que la rejilla quite una columna.
`--iv-gallery-gap`	`var(--iv-space-3)`	Separación entre miniaturas.
`--iv-gallery-ratio`	`3 / 2`	Proporción de una miniatura en la rejilla y en la tira.
`--iv-gallery-radius`	`var(--iv-radius-lg)`	Esquina de una miniatura.
`--iv-gallery-scrim`	token de velo	Oscuridad del velo que lleva el icono de ampliar.
`--iv-lightbox-chip-bg`, `-border`, `-highlight`, `-text`	anclados a la paleta	Los chips del visor: cerrar, flechas, zoom, contador y pie.
`--iv-lightbox-icon-size`, `-stroke`	valores del icono	Tamaño y grosor de los chevrones y los glifos.

Los chips no toman el cristal del tema en curso: están anclados a la paleta para que el visor sea una sala oscura también en claro y los botones conserven su contraste sobre cualquier fotografía. El fondo se mezcla desde el neutro más oscuro al 92 % con literales de reserva, porque no todos los motores heredan propiedades personalizadas en ::backdrop. Con movimiento reducido se quitan el fundido y la escala de entrada; el visor sigue abriendo, cambiando y cerrando.

Errores habituales

Enlazar la miniatura a la página en vez de a la imagen, o a #. El enlace es el camino sin script: apúntalo al archivo completo.
Servir la miniatura como imagen completa. La miniatura puede ser pequeña y el href grande; de eso va la pareja.
Repetir el pie en el alt. El alt describe la imagen; el pie la acredita y la comenta.
Una tira sin tabindex="0", rol y etiqueta: una región desplazable a la que el teclado no llega.
Esperar un solo visor para dos galerías. Cada galería construye el suyo; la misma imagen puede estar en las dos.

Índice de clases

Partes y modificadores de esta familia que los ejemplos de arriba no muestran. La lista completa por hoja está en la referencia.

Clase	Qué hace
`iv-lightbox__panel`	Panel del diálogo que el visor construye al abrirse.
`iv-lightbox__stage`	Área que contiene la imagen y recibe los gestos.
`iv-lightbox__img`	La imagen mostrada; su alt viene del ítem de la galería.
`iv-lightbox__button`	Base común de los botones del visor.
`iv-lightbox__close`	Botón de cierre; su etiqueta es la opción closeText.
`iv-lightbox__prev`	Imagen anterior; etiqueta de prevText.
`iv-lightbox__next`	Imagen siguiente; etiqueta de nextText.
`iv-lightbox__zoom`	Alternador de zoom; etiqueta de zoomText.
`iv-lightbox__counter`	Indicador de posición, escrito como índice / total.

Todos los componentes de contenido

Todos los componentes interactivos

Navegar