1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capas lightboximageoverlay

Image Lightbox

Visor de imágenes sobre capa oscura a pantalla completa con controles de cierre.

Nature Landscape / 2024

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { ImageLightbox } from 'astro-component-kit';
---

<LightboxOverlay>Content</LightboxOverlay>
--- import { ImageLightbox } from 'astro-component-kit'; --- <LightboxOverlay>Content</LightboxOverlay>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/ImageLightbox.astro:

astro 
---
---
<div class="lightbox">
  <div class="close">×</div>
  <div class="img-preview"></div>
  <div class="caption">Nature Landscape / 2024</div>
</div>
<style>
  .lightbox { position: fixed; inset: 0; background: #000; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .close { position: absolute; top: 2rem; right: 2rem; color: #fff; font-size: 2.2rem; cursor: pointer; }
  .img-preview { width: 80%; height: 70%; background: #1e293b; border-radius: 12px; }
  .caption { margin-top: 2rem; color: #94a3b8; font-family: monospace; }
</style>
--- --- <div class="lightbox"> <div class="close">×</div> <div class="img-preview"></div> <div class="caption">Nature Landscape / 2024</div> </div> <style> .lightbox { position: fixed; inset: 0; background: #000; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; } .close { position: absolute; top: 2rem; right: 2rem; color: #fff; font-size: 2.2rem; cursor: pointer; } .img-preview { width: 80%; height: 70%; background: #1e293b; border-radius: 12px; } .caption { margin-top: 2rem; color: #94a3b8; font-family: monospace; } </style>

Información Rápida

Categoría
Modales & Capas
Nombre de archivo
ImageLightbox.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
lightboximageoverlay