Lightboxen

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öffnet wird, diese über­lagert und darin eine ver­größerte Ansicht eines Bildes anzeigt. Wired freute sich kurz darauf1 ü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, mit einer klein­teiligen Folie aus einem Seminar von mir, 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!

Wie darin zu sehen, wird unten innerhalb der Lightbox-Layers der 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.

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.

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. [↩]