Fotogalerij met viewer

Hoe het werkt

We upgraden de galerij uit Level 1: klik op een kleine foto en een grote versie opent over de hele pagina met een donkere achtergrond (dit heet een lightbox). Nog een keer klikken sluit hem.

Ik laat je zien: de lightbox

HTML – voeg onder de galerij een “zoomvenster” toe (eerst verborgen):

<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 – een venster over het hele scherm:

#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 – en nu iets nieuws: we werken met alle foto’s tegelijk:

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");
});

Nieuw:

• querySelectorAll(".gallery img") – vind alle elementen die bij een CSS-selector passen (dezelfde syntax als in CSS!). Geeft een lijst terug.
• forEach((photo) => { ... }) – “doe dit voor elk item in de lijst.” Een lus – nog een bouwsteen van programmeren.
• photo.src – het adres van de afbeelding. We kopiëren het van de kleine foto naar de grote.

Nu jij 💪

1. Voeg een lightbox toe aan je website volgens het voorbeeld. Je hebt al een galerij uit Level 1 – zorg dat de selector (.gallery img) bij je classes past.
2. Een upgrade voor de dapperen – navigeren met pijltjes:

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");
});

Projectideeën: 🏫 foto’s van schoolevenementen · 🙋 je creaties en avonturen · 🌍 foto’s van reizen (hier schittert de lightbox echt!) · ⚽ momenten van wedstrijden.

Wat neem je mee uit deze les

• querySelectorAll() vindt alle elementen die bij een CSS-selector passen, forEach loopt ze één voor één af.
• Een lightbox = een verborgen <div> over de hele pagina (position: fixed; inset: 0) + de class hidden schakelen.
• Een functie function naam() {...} is een benoemd, herbruikbaar pakket code.

© 2026 Ing. Martin Polak / AlgoRhino · Contentgebruiksvoorwaarden