Fotogalerie mit Betrachter

Ein Klick auf ein Foto macht es größer und füllt den ganzen Bildschirm. Du lernst, mit einer Gruppe von Elementen zu arbeiten.

Wie es funktionieren wird

Wir rüsten die Galerie aus Level 1 auf: Ein Klick auf ein kleines Foto öffnet eine große Version über die ganze Seite mit dunklem Hintergrund (das heißt Lightbox). Nochmal klicken schließt sie.

HTML – füge unter der Galerie ein „Zoom-Fenster” hinzu (zuerst versteckt):

<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 – ein Fenster, das den ganzen Bildschirm bedeckt:

#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 – und jetzt etwas Neues: Wir arbeiten mit allen Fotos auf einmal:

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

Neue Sachen:

querySelectorAll(".gallery img") – finde alle Elemente, die zu einem CSS-Selektor passen (dieselbe Syntax wie in CSS!). Gibt eine Liste zurück.
forEach((photo) => { ... }) – „mach das für jedes Element in der Liste.” Eine Schleife – ein weiterer Grundbaustein des Programmierens.
photo.src – die Adresse des Bildes. Wir kopieren sie vom kleinen Foto ins große.

Jetzt du 💪

Füge deiner Website eine Lightbox nach dem Beispiel hinzu. Du hast schon eine Galerie aus Level 1 – achte nur darauf, dass der Selektor (.gallery img) zu deinen Klassen passt.
Ein Upgrade für Mutige – Navigation mit Pfeiltasten:

Bonus: zum nächsten/vorherigen Foto navigieren

Eine Erweiterung des Skripts – wir merken uns, welches Foto gerade offen ist:

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

Zwei weitere neue Sachen: function showPhoto(number) {...} ist eine benannte Funktion – ein Paket Code, das du von überall per Name aufrufen kannst. Und photos[current] holt ein Element aus einer Liste anhand seiner Position (Zählen beginnt bei null!).

Projektideen: 🏫 Fotos von Schulveranstaltungen · 🙋 deine Kreationen und Abenteuer · 🌍 Fotos von Reisen (hier kommt die Lightbox richtig zur Geltung!) · ⚽ Momente von Spielen.

✅

Kontrolliere dich selbst: Du klickst auf ein Foto → es wird größer auf dunklem Hintergrund. Du klickst nochmal → es schließt sich. Mit dem Bonus kannst du auch mit Pfeiltasten navigieren und mit Escape schließen. Genau so funktionieren Galerien auf professionellen Websites – und jetzt weißt du, was drinsteckt.

Das nimmst du aus dieser Lektion mit

querySelectorAll() findet alle Elemente, die zu einem CSS-Selektor passen, forEach geht sie der Reihe nach durch.
Eine Lightbox = ein verstecktes <div>, das die ganze Seite bedeckt (position: fixed; inset: 0) + Umschalten der Klasse hidden.
Eine Funktion function name() {...} ist ein benanntes, wiederverwendbares Paket Code.

Wie es funktionieren wird

Zeig mir das: die Lightbox

Jetzt du 💪

Das nimmst du aus dieser Lektion mit