Компонент лайтбокса изображения
Компонент лайтбокса с адаптивным изображением с ретро/винтажным дизайном и цветовой гаммой земляных тонов, подходящий для приборных панелей.
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()">×</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, с триадической цветовой схемой и поддержкой темного режима. Он подходит для портфолио, демонстрирующего работы или продукты.