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

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

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

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

HTML-код

<div class="relative w-full p-4 max-w-4xl mx-auto">
    <!-- Thumbnail images -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <img src="https://picsum.photos/300/200?random=1" alt="Image 1" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=1')" />
        <img src="https://picsum.photos/300/200?random=2" alt="Image 2" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=2')" />
        <img src="https://picsum.photos/300/200?random=3" alt="Image 3" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=3')" />
        <img src="https://picsum.photos/300/200?random=4" alt="Image 4" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=4')" />
    </div>

    <!-- Modal overlay -->
    <div id="imageModal" class="fixed inset-0 z-50 hidden bg-black bg-opacity-75 justify-center items-center dark:bg-opacity-90" onclick="closeModal()">
        <div class="relative w-11/12 md:w-3/4 lg:w-2/3">
            <span class="absolute top-2 right-2 text-white cursor-pointer" onclick="closeModal()">&times;</span>
            <img id="modalImage" class="rounded-lg shadow-lg" src="" alt="Modal Image" />
        </div>
    </div>
</div>

<!-- Tailwind CSS styles for dark mode and retro theme -->
<style>
    body {
        background-color: #f4f4e6;
        color: #333;
    }
    .dark body {
        background-color: #1a202c;
        color: #e2e8f0;
    }
</style>

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

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

Игривый и забавный компонент лайтбокса изображений для CRM/Business Tools, отличающийся цветовой схемой в оттенках серого, округлыми элементами и сложным интерфейсом для интерактивного просмотра изображений. Полностью адаптивный с поддержкой темного режима.

Открытый

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

Компонент лайтбокса с адаптивным изображением с минималистичным плоским дизайном, монохромной цветовой гаммой и умеренной сложностью, подходящий для интерфейсов социальных сетей. Он поддерживает темную тему с использованием префикса dark: CSS Tailwind и не требует JavaScript. Изображения взяты с сайта picsum.photos.

Открытый

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

Отзывчивый компонент Image Lightbox, выполненный в стиле Material Design, с триадической цветовой схемой и поддержкой темного режима. Он подходит для портфолио, демонстрирующего работы или продукты.

Открытый