---
title: "Lightboxen"
id: "42167"
slug: "lightboxen"
permalink: "https://eay.cc/2026/lightboxen/"
published_at: "2026-06-07T12:02:04+00:00"
author: "Stefan Grund"
type: "post"
format: "standard"
tags:
  - "changelog"
  - "eayz"
  - "in eigener sache"
  - "internet"
short_url: "https://eay.li/42t"
content_copy:
  - "https://bsky.app/profile/eay.social/post/3mnp4wcxzox26"
  - "https://eay.social/@eay/116708719046090300"
---

# Lightboxen

Zum Jahreswechsel 2005/2006 erfand der Entwickler [Lokesh Dhakar](https://lokeshdhakar.com/) mit [Lightbox JS](https://github.com/lokesh/lightbox) das Konzept der Lightbox im Web: einem Layer, der auf der aktu­ellen Seite geöffnet wird, diese über­lagert und darin eine ver­größerte Ansicht eines Bildes anzeigt. [Wired freute sich kurz darauf](https://web.archive.org/web/20190718071946/https://www.wired.com/2006/01/more-floating-photos-introducing-lightbox-js/)[1](https://eay.cc/2026/lightboxen/#footnote_0_42167 "Internet-Archive-Snapshot der Wired-Seite von 2006, aufgenommen 2019, weil Condé Nast irgendwann zwischen dann und jetzt glaubte, so einen kleinen, historischen Artikel hinter die Paywall legen zu müssen.") über die mini­malis­tische Galerie­anmutung der Umsetzung und lobte sie gegen­über anderen Bedien­para­digmen („rather than resorting to a pop-up window, a new browser window, or any other technique which forces your users to hit the back button.“).

Zwei Dekaden später kann ich also sagen: Das Lightbox-Konzept hat sich offen­sicht­lich durch­gesetzt, Zeit es hier auch einzu­bauen. Sicher ist sicher. Gesagt und getan. 😌

In dem folgenden Video seht ihr also [diesen Beitrag](https://eay.cc/2025/status-2025-11-27-0755/), mit einer klein­teiligen Folie aus einem [Seminar von mir](https://eay.cc/2024/lehre-an-der-hmkw/), die natürlich zum Ver­größern einlädt. Ebenso natürlich das Beispiel­video selbst, weshalb auch das in der Lightbox vergrößert werden kann. Lightbox-Inception!

[Video](https://eay.cc/uploads/2026/lightbox.mp4)

Wie darin zu sehen, wird unten innerhalb der Lightbox-Layers der [Alt-Text](https://de.wikipedia.org/wiki/Alt-Text) des Bildes darge­stellt, sofern vorhanden. Ist er länger als eine Zeile, lässt er sich optional auf eine Zeile _runtertogglen_, um mehr von dem Bild oder Video zu sehen. Die Darstellung ist dabei vom einer der besten Mastodon-Clients und generell Web-Apps out there inspiriert: [Phanpy](https://phanpy.social/).

Außerdem zu sehen: Der Close-Button oben rechts, der bei euch – solltet ihr etwa auf macOS unterwegs sein – evtl. links unterge­bracht ist, da ich die Positionierung abhängig von den Konventionen eurer verwendeten Plattform gemacht habe.

Anstatt also die Medien­inhalte direkt im Content größer zu machen, dürfte ihr jetzt nochmal extra klicken. ~~Na super.~~

–

**Nachtrag, 23.07.2026:** Weil ich jetzt schon ein paar Mal selbst nachgucken musste, hier ein kleines How-To für Future Stefan: Einfach `data-lightbox` auf einen `img`, `video` oder `a`-Tag werfen und schon wird die referenzierte Quelle in groß geöffnet. Für die Captions werden die `alt`-Texte (`img` und `img`-Fallback im `video`) genutzt, sowie das `title`-Attribut bei `a`s.

1. Internet-Archive-Snapshot der Wired-Seite von 2006, aufgenommen 2019, weil Condé Nast irgendwann zwischen dann und jetzt glaubte, so einen kleinen, historischen Artikel hinter die Paywall legen zu müssen. \[[↩](https://eay.cc/2026/lightboxen/#identifier_0_42167)\]