Componenti Immagine Lightbox Componente Lightbox immagine

Componente Lightbox immagine

Un componente lightbox per immagini reattivo progettato in modalità scura utilizzando Tailwind CSS. Presenta uno sfondo scuro, effetti di opacità e design reattivi per adattarsi a varie dimensioni dello schermo.

Anteprima

Codice HTML

<div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75 hidden" id="lightbox">
    <div class="relative">
        <img src="https://picsum.photos/800/600" alt="Lightbox Image" class="rounded-lg shadow-lg">
        <button class="absolute top-2 right-2 text-white bg-gray-800 hover:bg-gray-700 rounded-full p-2 focus:outline-none" onclick="document.getElementById('lightbox').classList.add('hidden')">
            &times;
        </button>
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4">
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/200" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/201" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/202" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/203" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/204" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/205" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
</div>

Componenti correlati

Componente Lightbox immagine

Un componente lightbox per immagini complesso e reattivo con un design "ispirato alla carta/stampa", una combinazione di colori in tonalità gioiello e il supporto della modalità scura, adatto per piattaforme musicali/audio. Presenta ricchi elementi interattivi.

Aperto

Componente Lightbox immagine

Un componente lightbox per immagini reattivo progettato in stile brutalista con toni della Terra. È dotato di un supporto per la modalità oscura per la visualizzazione del dashboard.

Aperto

Componente Lightbox immagine

Un componente Image Lightbox reattivo progettato per l'e-commerce, con supporto per la modalità scura e una combinazione di colori dei toni della terra.

Aperto