Fotogalleri med en visare · Koda med Martin

Klick på ett foto gör det större och fyller hela skärmen. Du lär dig jobba med en grupp element.

Så funkar det

Vi uppgraderar galleriet från nivå 1: klick på ett litet foto öppnar en stor version över hela sidan med mörk bakgrund (det kallas lightbox). Klick igen stänger den.

Jag visar: lightboxen

HTML – lägg till ett “zoomfönster” under galleriet (dolt först):

<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 – ett fönster som täcker hela 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 – och nu något nytt: vi jobbar med alla foton på en gång:

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

Nytt:

querySelectorAll(".gallery img") – hitta alla element som matchar en CSS-selector (samma syntax som i CSS!). Returnerar en lista.
forEach((photo) => { ... }) – “gör det här för varje sak i listan.” En loop – en annan grundsten i programmering.
photo.src – bildens adress. Vi kopierar den från det lilla fotot till det stora.

Nu är det din tur 💪

Lägg till en lightbox på din webbplats efter exemplet. Du har redan ett galleri från nivå 1 – se bara till att selectorn (.gallery img) matchar dina klasser.
En uppgradering för de modiga – navigera med pilar:

Bonus: bläddra till nästa/föregående foto

En utökning av scriptet – vi minns vilket foto som är öppet:

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

Två saker till: function showPhoto(number) {...} är en namngiven funktion – ett paket kod du kan köra var som helst med namnet. Och photos[current] plockar ut ett objekt ur en lista efter position (räkningen börjar på noll!).

Projektidéer: 🏫 foton från skolevenemang · 🙋 dina skapelser och äventyr · 🌍 foton från resor (här lyser lightboxen verkligen!) · ⚽ ögonblick från matcher.

✅

Kolla själv: Du klickar på ett foto → det växer på mörk bakgrund. Du klickar igen → det stängs. Med bonusen kan du också navigera med pilar och stänga med Escape. Så här funkar gallerier på proffswebbplatser – och nu vet du vad som finns inuti.

Det här tar du med dig från lektionen

querySelectorAll() hittar alla element som matchar en CSS-selector, forEach går igenom dem en och en.
En lightbox = en dold <div> som täcker hela sidan (position: fixed; inset: 0) + att växla klassen hidden.
En funktion function name() {...} är ett namngivet, återanvändbart paket kod.