Компоненты Изображение Лайтбокс Компонент лайтбокса изображения

Компонент лайтбокса изображения

Минималистичный компонент лайтбокса с адаптивным дизайном и поддержкой темной темы для целей панели управления. Использует picsum.photos для изображений.

Предварительный просмотр

HTML-код

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
    <!-- Image 1 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/1/300/200" alt="Image 1" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/2/300/200" alt="Image 2" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/3/300/200" alt="Image 3" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 4 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/4/300/200" alt="Image 4" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>
  </div>

  <!-- Lightbox Overlay (hidden by default) -->
  <div id="lightbox-overlay" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-75 hidden">
    <div class="relative">
      <img id="lightbox-image" src="" alt="Lightbox Image" class="max-w-3xl max-h-screen">
      <button id="close-lightbox" class="absolute top-4 right-4 text-white text-2xl font-bold">&times;</button>
    </div>
  </div>
</div>

Связанные компоненты

Компонент лайтбокса для ретро изображения

Отзывчивый, простой компонент лайтбокса с ретро/винтажным дизайном, аналогичной цветовой схемой и поддержкой темного режима, подходит для блогов и контент-сайтов.

Открытый

Компонент лайтбокса изображения

Адаптивный компонент Image Lightbox, разработанный для электронной коммерции с минималистичным плоским стилем дизайна, поддерживающий светлые и темные темы с использованием Tailwind CSS.

Открытый

Компонент лайтбокса изображения

Компонент лайтбокса с отзывчивым изображением, выполненный в брутальном стиле с земляными тонами. Он имеет поддержку темного режима для визуализации приборной панели.

Открытый