{ "version": "https://jsonfeed.org/version/1", "title": "eay.cc", "description": "Weblog von Stefan Grund", "home_page_url": "https://eay.cc", "feed_url": "https://eay.cc/2026/lightboxen/feed/json/", "icon": "https://eay.cc/apple-touch-icon.png", "favicon": "https://eay.cc/favicon.ico", "author": { "name": "Stefan Grund", "url": "https://stefangrund.de/", "avatar": "https://stefangrund.de/avatar.jpg" }, "items": [ { "id": "42167", "_type": "standard", "url": "https://eay.cc/2026/lightboxen/", "title": "Lightboxen", "content_html": "

Zum Jahreswechsel 2005/2006 erfand der Entwickler Lokesh Dhakar mit Lightbox JS das Konzept der Lightbox im Web: einem Layer, der auf der aktu­ellen Seite ge\u00f6ffnet wird, diese \u00fcber­lagert und darin eine ver­gr\u00f6\u00dferte Ansicht eines Bildes anzeigt. Wired freute sich kurz darauf1 \u00fcber die mini­malis­tische Galerie­anmutung der Umsetzung und lobte sie gegen­\u00fcber 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.“).

\n

Zwei Dekaden sp\u00e4ter 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. \ud83d\ude0c

\n

In dem folgenden Video seht ihr also diesen Beitrag, mit einer klein­teiligen Folie aus einem Seminar von mir, die nat\u00fcrlich zum Ver­gr\u00f6\u00dfern einl\u00e4dt. Ebenso nat\u00fcrlich das Beispiel­video selbst, weshalb auch das in der Lightbox vergr\u00f6\u00dfert werden kann. Lightbox-Inception!

\n

\n

Wie darin zu sehen, wird unten innerhalb der Lightbox-Layers der Alt-Text des Bildes darge­stellt, sofern vorhanden. Ist er l\u00e4nger als eine Zeile, l\u00e4sst 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.

\n

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

\n

Anstatt also die Medien­inhalte direkt im Content gr\u00f6\u00dfer zu machen, d\u00fcrfte ihr jetzt nochmal extra klicken. Na super.

\n

\u2013

\n

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

\n
  1. Internet-Archive-Snapshot der Wired-Seite von 2006, aufgenommen 2019, weil Cond\u00e9 Nast irgendwann zwischen dann und jetzt glaubte, so einen kleinen, historischen Artikel hinter die Paywall legen zu m\u00fcssen.
\"\"", "date_published": "2026-06-07T12:02:04+00:00", "date_modified": "2026-07-23T21:38:23+00:00", "author": { "name": "Stefan" }, "attachments": [ { "url": "https://eay.cc/uploads/2026/lightbox.mp4", "mime_type": "video/mp4", "size_in_bytes": 1398279 } ], "tags": [ "changelog", "eayz", "in eigener sache", "internet" ], "_short_url": "https://eay.li/42t", "_syndication": [ "https://bsky.app/profile/eay.social/post/3mnp4wcxzox26", "https://eay.social/@eay/116708719046090300" ] } ] }