Galleria fotografica con visualizzatore

Cliccare su una foto la ingrandisce a tutto schermo. Imparerai a lavorare con un gruppo di elementi.

Come funzionerà

Miglioreremo la galleria del Livello 1: cliccare una foto piccola apre una versione grande su tutta la pagina con sfondo scuro (si chiama lightbox). Cliccare di nuovo la chiude.

HTML – aggiungi una “finestra zoom” sotto la galleria (nascosta all’inizio):

<div class="gallery">
  <img src="images/p1.jpg" alt="First photo">
  <img src="images/p2.jpg" alt="Second photo">
  <img src="images/p3.jpg" alt="Third photo">
</div>

<div id="lightbox" class="hidden">
  <img id="lightbox-photo" src="" alt="">
</div>

CSS – una finestra che copre tutto lo schermo:

#lightbox {
  position: fixed;          /* stuck over the whole window */
  inset: 0;                 /* 0 from every edge = the whole area */
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

#lightbox img {
  max-width: 90%;
  max-height: 90%;
}

.hidden {
  display: none !important; /* hide completely */
}

JavaScript – e ora qualcosa di nuovo: lavoriamo con tutte le foto insieme:

const photos = document.querySelectorAll(".gallery img");
const lightbox = document.getElementById("lightbox");
const lightboxPhoto = document.getElementById("lightbox-photo");

// For every photo in the gallery: show it big on click
photos.forEach((photo) => {
  photo.addEventListener("click", () => {
    lightboxPhoto.src = photo.src;
    lightboxPhoto.alt = photo.alt;
    lightbox.classList.remove("hidden");
  });
});

// Clicking anywhere in the lightbox closes it
lightbox.addEventListener("click", () => {
  lightbox.classList.add("hidden");
});

Novità:

querySelectorAll(".gallery img") – trova tutti gli elementi che corrispondono a un selettore CSS (la stessa sintassi del CSS!). Restituisce una lista.
forEach((photo) => { ... }) – “fai questo per ogni elemento della lista.” Un ciclo – un altro mattoncino base della programmazione.
photo.src – l’indirizzo dell’immagine. Lo copiamo dalla foto piccola in quella grande.

Ora tocca a te 💪

Aggiungi un lightbox al sito web seguendo l’esempio. Hai già una galleria dal Livello 1 – assicurati che il selettore (.gallery img) corrisponda alle tue classi.
Un upgrade per i coraggiosi – navigare con le frecce:

Bonus: vai alla foto successiva/precedente

Estensione dello script – ricordiamo quale foto è aperta:

const photos = document.querySelectorAll(".gallery img");
const lightbox = document.getElementById("lightbox");
const lightboxPhoto = document.getElementById("lightbox-photo");
let current = 0;

function showPhoto(number) {
  // Handle wraparound: after the last photo comes the first again
  if (number < 0) number = photos.length - 1;
  if (number >= photos.length) number = 0;

  current = number;
  lightboxPhoto.src = photos[current].src;
  lightboxPhoto.alt = photos[current].alt;
}

photos.forEach((photo, index) => {
  photo.addEventListener("click", () => {
    showPhoto(index);
    lightbox.classList.remove("hidden");
  });
});

lightbox.addEventListener("click", () => {
  lightbox.classList.add("hidden");
});

// Navigate with the keyboard
document.addEventListener("keydown", (event) => {
  if (lightbox.classList.contains("hidden")) return;

  if (event.key === "ArrowRight") showPhoto(current + 1);
  if (event.key === "ArrowLeft") showPhoto(current - 1);
  if (event.key === "Escape") lightbox.classList.add("hidden");
});

Altre due novità: function showPhoto(number) {...} è una funzione con nome – un pacchetto di codice che puoi eseguire ovunque per nome. E photos[current] prende un elemento dalla lista per posizione (il conteggio parte da zero!).

Idee per progetto: 🏫 foto da eventi scolastici · 🙋 le tue creazioni e avventure · 🌍 foto dai viaggi (qui il lightbox brilla davvero!) · ⚽ momenti dalle partite.

✅

Controlla da solo: Clicchi una foto → si ingrandisce su sfondo scuro. Clicchi di nuovo → si chiude. Con il bonus, puoi navigare con le frecce e chiudere con Escape. È esattamente così che funzionano le gallerie sui siti professionali – e ora sai cosa c’è dentro.

Cosa porti via da questa lezione

querySelectorAll() trova tutti gli elementi corrispondenti a un selettore CSS, forEach li scorre uno per uno.
Lightbox = un <div> nascosto che copre tutta la pagina (position: fixed; inset: 0) + attivare/disattivare la classe hidden.
Una funzione function nome() {...} è un pacchetto di codice nominato e riutilizzabile.

Galleria fotografica con visualizzatore

Come funzionerà

Te lo mostro: il lightbox

Ora tocca a te 💪

Cosa porti via da questa lezione