Fotogalleri med en fremviser

Et klik på et foto gør det større og fylder hele skærmen. Du lærer at arbejde med en gruppe elementer.

Sådan virker det

Vi opgraderer galleriet fra niveau 1: et klik på et lille foto åbner en stor version af det over hele siden med en mørk baggrund (det kaldes en lightbox). Et klik igen lukker den.

Vis mig: lightboxen

HTML – tilføj et “zoomvindue” under galleriet (skjult i starten):

<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 – et vindue, der dækker hele skærmen:

#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 – og nu noget nyt: vi arbejder med alle fotos på én gang:

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

Nye ting:

querySelectorAll(".gallery img") – find alle elementer, der matcher en CSS-selector (den samme syntaks som i CSS!). Returnerer en liste.
forEach((photo) => { ... }) – “gør dette for hvert element i listen.” En løkke – endnu en grundlæggende byggeklods i programmering.
photo.src – billedets adresse. Vi kopierer den fra det lille foto til det store.

Nu er det din tur 💪

Tilføj en lightbox til din hjemmeside efter eksemplet. Du har allerede et galleri fra niveau 1 – sørg bare for, at selectoren (.gallery img) matcher dine klasser.
En opgradering for de modige – navigation med pile:

Bonus: naviger til næste/forrige foto

En udvidelse af scriptet – vi husker, hvilket foto der er åbent:

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

To nye ting mere: function showPhoto(number) {...} er en navngivet funktion – en pakke kode, du kan køre fra hvor som helst ved navn. Og photos[current] henter et element ud af en liste efter position (tælling starter ved nul!).

Projektidéer: 🏫 fotos fra skolebegivenheder · 🙋 dine kreationer og eventyr · 🌍 fotos fra ture (her skinner lightboxen virkelig!) · ⚽ øjeblikke fra kampe.

✅

Tjek dig selv: Du klikker på et foto → det vokser på en mørk baggrund. Du klikker igen → det lukker. Med bonussen kan du også navigere med pile og lukke med Escape. Præcis sådan fungerer gallerier på professionelle hjemmesider – og nu ved du, hvad der er indeni.

Det tager du med fra denne lektion

querySelectorAll() finder alle elementer, der matcher en CSS-selector, forEach går igennem dem én for én.
En lightbox = et skjult <div>, der dækker hele siden (position: fixed; inset: 0) + skift af hidden-klassen.
En funktion function name() {...} er en navngivet, genanvendelig pakke kode.