Componenti Immagine Lightbox Componente Lightbox immagine

Componente Lightbox immagine

Un componente Image Lightbox in stile brutalista adatto per un blog o una piattaforma di contenuti, progettato con toni della terra ed elementi interattivi complessi.

Anteprima

Codice HTML

<div class="relative flex flex-col items-center justify-center p-4 w-full max-w-screen-lg mx-auto bg-white dark:bg-gray-800 border-2 border-gray-700 dark:border-gray-300 rounded-lg overflow-hidden shadow-lg">
    <h2 class="text-3xl font-bold mb-4 text-gray-800 dark:text-gray-200">Image Lightbox</h2>
    <div class="flex flex-wrap justify-center gap-4">
        <!-- Image Thumbnails -->
        <div class="w-1/3 p-2">
            <img src="https://picsum.photos/300/200?random=1" alt="Example Image 1" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300" onclick="openLightbox('https://picsum.photos/600/400?random=1')">
        </div>
        <div class="w-1/3 p-2">
            <img src="https://picsum.photos/300/200?random=2" alt="Example Image 2" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300" onclick="openLightbox('https://picsum.photos/600/400?random=2')">
        </div>
        <div class="w-1/3 p-2">
            <img src="https://picsum.photos/300/200?random=3" alt="Example Image 3" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300" onclick="openLightbox('https://picsum.photos/600/400?random=3')">
        </div>
    </div>
    <!-- Lightbox Overlay -->
    <div id="lightbox" class="hidden fixed inset-0 z-50 bg-black bg-opacity-75 flex items-center justify-center transition-opacity duration-300">
        <span class="absolute top-4 right-4 text-white cursor-pointer" onclick="closeLightbox()">&times;</span>
        <img id="lightbox-img" class="max-w-full max-h-full object-contain" src="" alt="Lightbox Image">
    </div>
</div>

<script>
function openLightbox(imageUrl) {
    const lightbox = document.getElementById('lightbox');
    const lightboxImg = document.getElementById('lightbox-img');
    lightboxImg.src = imageUrl;
    lightbox.classList.remove('hidden');
}

function closeLightbox() {
    const lightbox = document.getElementById('lightbox');
    lightbox.classList.add('hidden');
}
</script>

Componenti correlati

Componente Lightbox immagine

Un complesso componente Image Lightbox progettato con elementi scheumorfici e una combinazione di colori pastello, adatto per gli ambienti dashboard. Include un layout reattivo, supporto per temi scuri e un'interfaccia interattiva.

Aperto

Lightbox Glassmorphism con toni seppia per il settore immobiliare

Un componente lightbox per immagini reattivo con un design glassmorphism, caratterizzato da elementi traslucidi simili al vetro smerigliato e tonalità di colore seppia/marrone, adatto per gallerie di immagini di proprietà immobiliari. Include il supporto per la modalità oscura.

Aperto

Componente Lightbox immagine

Un semplice componente lightbox per immagini reattive progettato per siti Web di e-commerce, caratterizzato da uno stile in modalità scura e una combinazione di colori analoga.

Aperto