Fotogalleri med en fremviser · Kode med Martin

Et klikk på et bilde gjør det større og fylder hele skjermen. Du lærer at arbejde med en gruppe elementer.

Sådan fungerer det

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

Jeg viser deg: lightboxen

HTML – legg til 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 dekker hele skjermen:

#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 noe nyt: vi jobber med alle bilder 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") – finn alle elementer, der matcher en CSS-selector (den samme syntaks som i CSS!). Returnerer en liste.
forEach((photo) => { ... }) – “gjør dette for hvert element i listen.” En løkke – endnu en grundlæggende byggeklods i programmering.
photo.src – bildets adresse. Vi kopierer den fra det lille bilde til det store.

Nå er det din tur 💪

Legg til en lightbox til din nettside etter eksemplet. Du har allerede et galleri fra nivå 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 bilde

En udvidelse af scriptet – vi husker, hvilket bilde 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 kjøre fra hvor som helst ved navn. Og photos[current] henter et element ud af en liste etter position (tælling starter ved nul!).

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

✅

Sjekk deg selv: Du klikker på et bilde → det vokser på en mørk baggrund. Du klikker igen → det lukker. Med bonussen kan du også navigere med pile og lukke med Escape. Nøyaktig sådan fungerer gallerier på profesjonelle nettsider – og nu ved du, hva der er indeni.

Dette tar du med deg fra leksjonen

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