Quando si parla di esperienze visive efficaci sul web, la presentazione delle immagini gioca un ruolo fondamentale. Che si tratti di un sito portfolio, di un blog di viaggi o di una vetrina prodotti, permettere all'utente di esplorare le immagini in modo interattivo può fare davvero la differenza.
Galleria lightbox con zoom sulle immagini con HTML, CSS e JS
In questa guida ti mostrerò come realizzare una galleria fotografica con effetto lightbox e funzione di zoom utilizzando esclusivamente HTML, CSS e JavaScript. Nessun plugin esterno, solo codice pulito e comprensibile. Seguendo passo dopo passo, arriveremo a costruire una galleria dinamica in cui le immagini si aprono in sovrimpressione e possono essere ingrandite per apprezzarne ogni dettaglio.
Che cosa serve e cosa otterremo
Per realizzare questa galleria lightbox con zoom, ci affideremo a tre tecnologie fondamentali del web. HTML per strutturare la galleria e definire gli elementi base, come le immagini e i contenitori. CSS per gestire lo stile visivo, le animazioni, la posizione della lightbox e l'effetto di zoom. JavaScript per rendere la galleria interattiva, cioè aprire la lightbox al click, chiuderla e applicare lo zoom sull'immagine selezionata.
Il risultato finale sarà una galleria composta da miniature cliccabili. Al click su una qualsiasi immagine si aprirà una finestra modale (la lightbox) che mostrerà l'immagine ingrandita. Passando il mouse sopra l'immagine (o toccandola su mobile), verrà applicato uno zoom dinamico che permetterà di esplorare i dettagli. Inoltre, ci sarà un'icona di chiusura per tornare facilmente alla galleria.
Si tratta di una soluzione leggera, responsive e adatta a qualsiasi progetto web in cui si voglia valorizzare il contenuto visivo senza appesantire la pagina con librerie esterne.
Il codice HTML della pagina web
<body>
<div class="gallery">
<img src="url_foto_1" alt="Immagine 1" class="thumbnail">
<img src="url_foto_2" alt="Immagine 2" class="thumbnail">
<img src="url_foto_3" alt="Immagine 3" class="thumbnail">
</div>
<div class="lightbox" id="lightbox">
<span class="close" id="closeBtn">×</span>
<img src="" alt="Immagine ingrandita" class="lightbox-img" id="lightboxImg">
</div>
</body>La struttura del codice HTML è abbastanza semplice. Il primo contenitore con classe gallery contiene tutte le miniature della galleria. Ogni immagine ha la classe thumbnail per essere facilmente selezionata via CSS e JavaScript. Poi il contenitore lightbox che appare sopra la pagina quando l'utente clicca su un'immagine. All'inizio è nascosto e verrà mostrato tramite JavaScript.
"close" è il pulsante "×" per chiudere la lightbox. Infine l'immagine lightbox-img verrà sostituita dinamicamente con quella cliccata dall'utente.
Il codice CSS della galleria lightbox
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin: 40px auto;
max-width: 1000px;
}
.thumbnail {
width: 400px;
cursor: pointer;
border-radius: 8px;
transition: transform 0.3s ease;
}
.thumbnail:hover {
transform: scale(1.05);
}
/* Stile del lightbox */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.9);
justify-content: center;
align-items: center;
z-index: 1000;
}
.lightbox-img {
max-width: 90%;
max-height: 80%;
object-fit: contain;
transition: transform 0.3s ease;
}
.lightbox-img:hover {
transform: scale(1.2);
cursor: zoom-in;
}
/* Stile del pulsante di chiusura */
.close {
position: absolute;
top: 30px;
right: 40px;
font-size: 40px;
color: white;
cursor: pointer;
z-index: 1001;
}Il codice CSS è suddiviso per zone della pagina. Inizialmente la sezione dedicata alla galleria in cui c'è un layout a griglia con spaziatura tra le immagini. Poi le miniature e il comportamento al passaggio del mouse su di esse. Infine l'effetto lightbox che inizialmente è nascosto di default e poi copre l'intero schermo con sfondo oscurato quando si attiva con l'immagine centrale e l'animazione al passaggio del mouse. Inoltre viene posizionato il pulsante "x" di chiusura in alto a destra per permettere la chiusura della lightbox.
Il codice JavaScript
const thumbnails = document.querySelectorAll(".thumbnail");
const lightbox = document.getElementById("lightbox");
const lightboxImg = document.getElementById("lightboxImg");
const closeBtn = document.getElementById("closeBtn");
thumbnails.forEach((thumbnail) => {
thumbnail.addEventListener("click", () => {
lightboxImg.src = thumbnail.src;
lightbox.style.display = "flex";
});
});
closeBtn.addEventListener("click", () => {
lightbox.style.display = "none";
lightboxImg.src = "";
});In questo snippet di codice JS vengono selezionate inizialmente tutte le immagini della galleria e poi, per ogni immagine, al clic viene mostrata la lightbox e di conseguenza l'immagine viene ingrandita. Infine al clic sul pulsante "x" di chiusura la lighgtbox scompare e l'immagine viene resettata.
Risultato finale e conclusione
Effetto realizzato! Una volta completati tutti i passaggi descritti, il risultato sarà una galleria moderna, interattiva e responsive, composta da miniature che, al clic, aprono una finestra sovrapposta (lightbox) con l'immagine ingrandita. Passando il mouse sull'immagine (o toccandola su dispositivi touch), si attiva un effetto zoom fluido che consente di esplorare meglio i dettagli visivi. L'utente potrà poi chiudere la lightbox in qualsiasi momento cliccando sull'icona "×" in alto a destra.
Di seguito un'anteprima animata del risultato finale ottenuto:
Questa soluzione è particolarmente adatta per portfolio fotografici, e-commerce, siti web di design o blog in cui le immagini hanno un ruolo centrale. L'intera implementazione è realizzata senza l'uso di librerie esterne, il che garantisce un caricamento più veloce della pagina e un maggiore controllo sull'aspetto e il comportamento della galleria.
Grazie all'uso di JavaScript puro, il codice è leggero, facilmente modificabile e compatibile con tutti i browser moderni. Inoltre, CSS è stato strutturato per adattarsi bene anche su dispositivi mobile, rendendo la galleria pienamente fruibile da smartphone e tablet.
