Componente Lightbox immagine
Un componente lightbox per immagini reattivo con un design retrò/vintage e una combinazione di colori della terra, adatto per cruscotti.
Codice 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>Componenti correlati
Componente Lightbox immagine
Un componente lightbox per immagini reattive con supporto per la modalità scura. Questo componente visualizza una galleria di immagini e facendo clic su un'immagine si apre una finestra modale a schermo intero con frecce di navigazione per sfogliare le immagini. È dotato di un pulsante di chiusura e utilizza colori vivaci per evidenziare gli elementi interattivi. Il design è studiato su misura per un contesto aziendale/aziendale, garantendo un'esperienza utente professionale ma coinvolgente.
Componente Lightbox immagine
Un componente lightbox per immagini reattivo progettato con lo stile Glassmorphism utilizzando Tailwind CSS. Il componente supporta un tema scuro con elementi traslucidi simili al vetro smerigliato ed effetti di sfocatura.
Componente Lightbox immagine
Un componente lightbox per immagini retrò/vintage con colori vivaci, design reattivo e supporto per temi scuri, adatto per i portfolio.