Responsive Bildergalerie mit Lightbox-Overlay in Tailwind CSS

1. Was eine gute Lightbox-Galerie leisten muss

Eine Bildergalerie mit Lightbox besteht aus zwei klar getrennten Zuständen: einer kompakten Vorschau, meist als Raster aus Thumbnails, und einer Vollbild-Ansicht, die ein einzelnes Bild groß darstellt und einen dunklen Hintergrund über den restlichen Seiteninhalt legt. Beide Zustände haben unterschiedliche Anforderungen: Die Vorschau muss viele Bilder platzsparend und performant laden, die Vollbild-Ansicht muss ein einzelnes Bild in bestmöglicher Qualität zeigen und dabei zwischen den Bildern der Galerie navigierbar bleiben.

Vier Aspekte entscheiden dabei über die Qualität der Umsetzung: ein Vorschau-Layout, das mit unterschiedlichen Bildformaten sauber umgeht, ein Öffnen-Übergang, der nicht abrupt wirkt, eine vollständige Tastaturbedienbarkeit für Navigation und Schließen, sowie Lazy-Loading, damit eine Galerie mit hundert Bildern nicht beim ersten Seitenaufruf alle hundert gleichzeitig lädt. Tailwind liefert dafür Grid- und Transition-Utilities, Alpine.js übernimmt den Zustand für das aktuell geöffnete Bild.

2. Responsives Grid-Layout für die Vorschau

Für die Vorschau eignet sich ein CSS-Grid mit einer festen Spaltenanzahl pro Breakpoint, üblicherweise zwei Spalten auf Mobilgeräten, drei auf Tablets und vier oder fünf auf großen Bildschirmen, kombiniert mit aspect-square oder einem festen Seitenverhältnis pro Kachel. Das feste Seitenverhältnis ist wichtig, damit Bilder mit unterschiedlichen Ausgangsformaten trotzdem ein gleichmäßiges, ruhiges Raster ergeben, statt dass hochkant- und querformatige Bilder das Grid unregelmäßig aussehen lassen.

Eine Alternative ist ein Masonry-Layout, bei dem die tatsächlichen Bildproportionen erhalten bleiben und Kacheln unterschiedlicher Höhe versetzt zueinander angeordnet werden, was besonders bei Fotogalerien mit stark unterschiedlichen Formaten natürlicher wirkt als ein starres Quadrat-Raster. Mit nativem CSS lässt sich das über columns-2 beziehungsweise columns-3 und break-inside-avoid pro Bild umsetzen, ganz ohne JavaScript-Bibliothek für die Positionsberechnung, allerdings mit dem Nachteil, dass die Lesereihenfolge dann spaltenweise statt zeilenweise erfolgt.

<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
  <button
    x-data
    @click="$store.lightbox.open(0)"
    class="group relative aspect-square overflow-hidden rounded-lg bg-slate-100"
  >
    <img
      src="/images/gallery/thumb-01.jpg"
      loading="lazy"
      alt="Produktdetail von vorne"
      class="h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
    >
  </button>
  <!-- weitere Kacheln analog -->
</div>

3. Das Vollbild-Overlay als eigene Alpine-Komponente

Das Overlay selbst ist ein fixed positioniertes Element, das den gesamten Viewport bedeckt, mit einem halbtransparenten dunklen Hintergrund und dem aktuell ausgewählten Bild zentriert darin. Der Zustand, welches Bild gerade geöffnet ist, sollte zentral in einem Alpine-Store liegen, nicht in der Vorschau-Komponente selbst, da Overlay und Grid getrennte DOM-Bereiche sind und ohne einen gemeinsamen Store nur über Custom Events kommunizieren könnten, was unnötig umständlich wäre.

Für den Index des aktuell sichtbaren Bildes reicht eine einzelne Zahl im Store, aus der sich sowohl das aktuelle Bild als auch die Navigation zum vorherigen und nächsten Bild ableiten lässt. Wichtig ist ein zusätzlicher Boolean, der signalisiert, ob das Overlay überhaupt sichtbar ist, getrennt vom Bildindex, damit ein Index von null nicht fälschlich als geschlossener Zustand interpretiert wird, wenn das erste Bild der Galerie geöffnet ist.

4. Zoom-Transition beim Öffnen und Schließen

Ein abruptes Erscheinen des Overlays wirkt technisch korrekt, aber wenig hochwertig. Eine kombinierte Transition aus Deckkraft und leichter Skalierung, etwa von scale-95 auf scale-100 gleichzeitig mit opacity-0 auf opacity-100, vermittelt den Eindruck, das Bild würde sich sanft aus der Vorschau heraus vergrößern, auch ohne eine echte FLIP-Animation vom exakten Ausgangspunkt der angeklickten Kachel zu berechnen.

Für eine noch überzeugendere Wirkung lässt sich die Position der angeklickten Kachel per getBoundingClientRect() auslesen und als Startpunkt einer echten Skalierungs-Transition verwenden, die das Bild optisch tatsächlich von der Kachel-Position zur zentrierten Vollbild-Position wandern lässt. Das erhöht den Implementierungsaufwand spürbar und lohnt sich vor allem für Galerien, bei denen die Öffnen-Animation ein zentrales Erlebnismerkmal ist, während die einfachere Skalierungs-Transition für die meisten Anwendungsfälle völlig ausreicht.

5. Tastaturnavigation mit Pfeiltasten

Sobald das Overlay geöffnet ist, sollten die rechte und linke Pfeiltaste zum nächsten beziehungsweise vorherigen Bild wechseln, und die Escape-Taste das Overlay schließen, ganz ohne dass die Nutzerin die Maus benutzen muss. Ein einzelner @keydown.window-Listener auf dem Alpine-Store, der nur reagiert, wenn das Overlay sichtbar ist, deckt alle drei Fälle mit wenigen Zeilen Code ab, statt für jede Taste einen separaten globalen Listener zu registrieren.

Wichtig ist, den Listener wirklich nur zu aktivieren, während das Overlay offen ist, sonst reagiert die restliche Seite unerwartet auf Pfeiltasten, etwa wenn ein Formularfeld gerade fokussiert ist und die Nutzerin eigentlich innerhalb eines Texts navigieren wollte. Eine einfache Bedingungsprüfung auf den Sichtbarkeits-Zustand des Overlays zu Beginn des Listeners verhindert dieses unerwünschte Übergreifen zuverlässig.

6. Lazy-Loading für Vorschau und Vollbild-Ansicht

Für die Vorschau-Thumbnails reicht in den meisten Fällen das native loading="lazy"-Attribut auf dem img-Tag, das der Browser selbst auswertet und Bilder erst lädt, sobald sie sich dem sichtbaren Bereich nähern, ganz ohne zusätzliches JavaScript oder einen Intersection Observer. Für die ersten paar Bilder direkt im sichtbaren Bereich beim Laden der Seite sollte loading="lazy" dagegen weggelassen oder explizit auf eager gesetzt werden, da verzögertes Laden für Above-the-Fold-Inhalte die wahrgenommene Ladezeit eher verschlechtert.

Für die Vollbild-Ansicht selbst lohnt sich zusätzlich ein Vorausladen des nächsten und vorherigen Bildes, sobald ein Bild geöffnet wird, damit ein Klick auf die Pfeiltaste nicht durch einen sichtbaren Ladezustand unterbrochen wird. Ein unsichtbares Image-Objekt, das im Hintergrund die Nachbarbilder in voller Auflösung lädt, während das aktuelle Bild bereits sichtbar ist, macht die Navigation innerhalb der Lightbox spürbar flüssiger, besonders bei großformatigen Fotos.

7. Touch-Bedienung auf Mobilgeräten

Auf Touch-Geräten erwarten Nutzerinnen zusätzlich zu eventuellen Buttons eine Wischgeste, um zwischen Bildern zu wechseln, ähnlich wie in nativen Galerie-Apps. Ohne native HTML-Unterstützung für Swipe-Gesten lässt sich das über einfache touchstart- und touchend-Listener umsetzen, die die horizontale Differenz zwischen Start- und Endpunkt der Berührung messen und ab einem Schwellenwert, etwa 50 Pixel, als Wisch nach links oder rechts interpretieren.

Pinch-to-Zoom innerhalb der Lightbox ist ein deutlich komplexeres Feature, das eine eigene Gestenverarbeitung mit mehreren gleichzeitigen Touch-Punkten benötigt und den Umfang eines einfachen Lightbox-Musters meist übersteigt. In vielen Fällen reicht es aus, native Browser-Zoom-Funktionen nicht zu unterbinden, sodass Nutzerinnen mit den Betriebssystem-eigenen Gesten in das Bild hineinzoomen können, statt eine eigene Zoom-Logik nachzubauen.

8. Barrierefreiheit: Fokus-Trap und Bildbeschreibungen

Wie bei jedem Overlay, das über dem restlichen Seiteninhalt liegt, muss der Tastaturfokus beim Öffnen ins Overlay wandern und darf es nicht verlassen, solange es sichtbar ist. Ein Fokus-Trap, etwa über das Alpine-Plugin @alpinejs/focus und die Direktive x-trap, übernimmt das zuverlässig, inklusive Rückgabe des Fokus an die ursprünglich angeklickte Kachel beim Schließen, was für Tastaturnutzerinnen die Orientierung deutlich erleichtert.

Jedes Bild braucht außerdem einen aussagekräftigen alt-Text, der den Bildinhalt tatsächlich beschreibt statt nur den Dateinamen zu wiederholen, da Screenreader-Nutzerinnen sonst beim Durchblättern der Galerie keine Vorstellung vom jeweiligen Bildinhalt bekommen. Zusätzlich hilft eine live aktualisierte Bildposition, etwa Bild 3 von 12, über eine aria-live-Region, damit Screenreader-Nutzerinnen beim Navigieren mitbekommen, an welcher Stelle der Galerie sie sich gerade befinden.

9. Grenzen des Musters und typische Fehler

Ein häufiger Fehler ist, sämtliche Vollbild-Versionen der Bilder bereits beim Laden der Vorschau-Seite in voller Auflösung vorzuladen, statt nur die kleinen Thumbnails. Das treibt die initiale Ladezeit unnötig in die Höhe, besonders bei Galerien mit vielen hochauflösenden Fotos, obwohl die meisten Nutzerinnen nur einen Bruchteil der Bilder tatsächlich in der Vollbild-Ansicht öffnen. Die Vollbild-Version sollte deshalb erst beim tatsächlichen Öffnen eines Bildes nachgeladen werden, höchstens ergänzt um das Vorausladen der direkten Nachbarbilder.

Eine zweite Grenze betrifft sehr große Galerien mit mehreren hundert Bildern, bei denen selbst ein Grid mit Lazy-Loading irgendwann an Grenzen stößt, weil der Browser weiterhin für jedes Bild ein DOM-Element vorhalten muss, auch wenn das eigentliche Bild noch nicht geladen ist. Für solche Fälle lohnt sich eine echte Virtualisierung des Grids, bei der nur die aktuell im oder nahe am Viewport befindlichen Kacheln überhaupt im DOM existieren, oder eine serverseitige Paginierung mit Nachladen beim Scrollen.

10. Zusammenfassung

11. FAQ: Lightbox-Bildergalerie mit Tailwind: Das Wichtigste auf einen Blick