1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Модальные окна lightboximageoverlay

Image Lightbox

Полноэкранный просмотрщик изображений с затемнением фона и кнопкой закрытия.

Nature Landscape / 2024

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

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

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

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: 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>

Краткая информация

Категория
Модальные окна
Имя файла
ImageLightbox.astro
Зависимости
Нет — чистый Astro + CSS
Теги
lightboximageoverlay