Live-Demo auf rainpearl.de
---
Das HTML: Struktur und Vorbereitung
Der HTML-Teil legt den Grundstein. Jedes Bild steckt in einem `<div class="grid-item">`, das beim Klick die JavaScript-Funktion `openLightbox()` aufruft – mit einer Zahl als Parameter, die angibt, welches Bild geöffnet werden soll.
Das `onclick`-Attribut ist der direkte Draht zu JavaScript: Sobald jemand auf dieses `<div>` klickt, wird `openLightbox(1)` ausgeführt. Weiter unten im HTML befindet sich die Lightbox selbst – zunächst unsichtbar, aber bereit:
Die Lightbox hat eine eindeutige `id="lightbox"`, damit JavaScript sie später gezielt ansprechen kann. Das Bild darin (`id="lightbox-image"`) hat zunächst kein `src` – das wird erst beim Öffnen gesetzt.
---
`querySelectorAll('.grid-item img')` sucht alle `<img>`-Elemente innerhalb von Elementen mit der Klasse `grid-item`. Das Ergebnis ist eine NodeList, die mit `Array.from()` in ein richtiges Array umgewandelt wird. Danach holt `.map(img => img.src)` aus jedem Bild-Element nur den Pfad heraus. Am Ende enthält `imagePaths` ein Array wie `["bilder/Bild01.jpeg", "bilder/Bild02.jpeg", ...]`. Dieses Array ist der gemeinsame Speicher für alle anderen Funktionen.
---
Hier passieren mehrere Dinge auf einmal. `document.getElementById()` holt sich die HTML-Elemente über ihre `id`. Dann wird `lightboxImage.src` auf den passenden Bildpfad gesetzt – `imageNumber - 1`, weil Arrays in JavaScript bei 0 beginnen (Bild 1 liegt also an Index 0). Mit `classList.add('active')` bekommt die Lightbox eine CSS-Klasse, die sie sichtbar macht. Und `document.body.style.overflow = 'hidden'` verhindert, dass die Seite im Hintergrund scrollt, solange die Lightbox offen ist.
---
Die zwei `if`-Abfragen sorgen für den Wraparound: Wer am letzten Bild weiterkllickt, landet wieder beim ersten – und umgekehrt. Das Schließen mit `closeLightbox()` ist das Gegenteil von `openLightbox()`: Die Klasse `active` wird entfernt, und `overflow` wird wieder auf `auto` gesetzt.
---
`addEventListener('keydown', ...)` registriert eine Funktion, die bei jedem Tastendruck ausgeführt wird. Die Abfrage `lightbox.classList.contains('active')` stellt sicher, dass die Tastatursteuerung nur aktiv ist, wenn die Lightbox wirklich offen ist. Alles startet dann sauber im `DOMContentLoaded`-Event – das bedeutet: JavaScript wartet, bis das HTML vollständig geladen ist, bevor es `collectImagePaths()` ausführt und den Klick-auf-Hintergrund-Listener einrichtet. Würde man das weglassen, könnte es passieren, dass JavaScript nach Elementen sucht, die noch gar nicht existieren.
---
Live-Demo auf rainpearl.de
Was wir bauen
Diese Galerie besteht aus drei Dateien: `gallery.html` (die Struktur), `gallery.css` (das Aussehen) und `gallery.js` (die Funktionalität). In diesem Tutorial konzentrieren wir uns auf das Zusammenspiel von HTML und JavaScript – denn genau dort passiert das Hauptgeschehen. Das Prinzip ist einfach: Bilder werden in einem Grid angezeigt, und per Klick öffnet sich eine sogenannte Lightbox, die das Bild groß präsentiert. CSS lassen wir hier bewusst außen vor.---
Das HTML: Struktur und Vorbereitung
Der HTML-Teil legt den Grundstein. Jedes Bild steckt in einem `<div class="grid-item">`, das beim Klick die JavaScript-Funktion `openLightbox()` aufruft – mit einer Zahl als Parameter, die angibt, welches Bild geöffnet werden soll.
HTML:
<div class="grid-item" onclick="openLightbox(1)">
<img src="bilder/Bild01.jpeg" alt="Bild 1" />
</div>
HTML:
<div id="lightbox" class="lightbox">
<span class="lightbox-close" onclick="closeLightbox()">×</span>
<button class="lightbox-nav lightbox-prev" onclick="changeLightboxImage(-1)">‹</button>
<button class="lightbox-nav lightbox-next" onclick="changeLightboxImage(1)">›</button>
<div class="lightbox-content">
<img id="lightbox-image" src="" alt="" />
</div>
<div class="lightbox-counter">
<span id="lightbox-current">1</span>
/
<span id="lightbox-total">9</span>
</div>
</div>---
JavaScript: Bildpfade einsammeln
Bevor irgendwas funktioniert, muss JavaScript wissen, wo alle Bilder liegen. Das erledigt die Funktion `collectImagePaths()`, die beim Laden der Seite automatisch ausgeführt wird:
Javascript:
function collectImagePaths() {
const gridItems = document.querySelectorAll('.grid-item img');
imagePaths = Array.from(gridItems).map((img) => img.src);
}---
JavaScript: Die Lightbox öffnen
Wenn jemand auf ein Bild klickt, wird `openLightbox(imageNumber)` aufgerufen:
Javascript:
function openLightbox(imageNumber) {
const lightbox = document.getElementById('lightbox');
const lightboxImage = document.getElementById('lightbox-image');
const currentCounter = document.getElementById('lightbox-current');
currentLightboxIndex = imageNumber;
lightboxImage.src = imagePaths[imageNumber - 1];
currentCounter.textContent = imageNumber;
lightbox.classList.add('active');
document.body.style.overflow = 'hidden';
}---
JavaScript: Blättern und Schließen
Das Weiterblättern übernimmt `changeLightboxImage(direction)`. Der Parameter ist entweder `1` (vorwärts) oder `-1` (rückwärts):
Javascript:
function changeLightboxImage(direction) {
const lightboxImage = document.getElementById('lightbox-image');
const currentCounter = document.getElementById('lightbox-current');
currentLightboxIndex += direction;
if (currentLightboxIndex > imagePaths.length) {
currentLightboxIndex = 1;
}
if (currentLightboxIndex < 1) {
currentLightboxIndex = imagePaths.length;
}
lightboxImage.src = imagePaths[currentLightboxIndex - 1];
currentCounter.textContent = currentLightboxIndex;
}---
JavaScript: Tastatursteuerung und DOMContentLoaded
Damit die Galerie auch mit der Tastatur bedienbar ist, lauscht JavaScript auf Tastendrücke:
Javascript:
document.addEventListener('keydown', function (event) {
const lightbox = document.getElementById('lightbox');
if (lightbox && lightbox.classList.contains('active')) {
if (event.key === 'ArrowLeft') {
changeLightboxImage(-1);
} else if (event.key === 'ArrowRight') {
changeLightboxImage(1);
} else if (event.key === 'Escape') {
closeLightbox();
}
}
});---
Zusammenfassung: Das Zusammenspiel
Das Grundprinzip dieser Galerie ist elegant einfach: HTML legt die Struktur fest und ruft beim Klick JavaScript-Funktionen auf. JavaScript speichert alle Bildpfade in einem Array, manipuliert dann gezielt einzelne HTML-Elemente (per `id`) und schaltet CSS-Klassen, um die Lightbox sichtbar oder unsichtbar zu machen. Wer die Galerie erweitern möchte, fügt einfach weitere `<div class="grid-item">` im HTML hinzu – `collectImagePaths()` findet sie automatisch, und der Counter passt sich von selbst an.Live-Demo auf rainpearl.de
