Eine Lightbox ist eine Überlagerung, die ein einzelnes Bild groß über der abgedunkelten Seite zeigt. Sie öffnet sich aus einer Galerie heraus, lässt sich mit Pfeilen durchblättern und schließt über ein Kreuz, die Escape-Taste oder einen Klick auf die dunkle Fläche.
- Lightbox
Überlagerung, die ein einzelnes Bild groß über der abgedunkelten Seite zeigt.
Beispiel: „Ein Klick auf das Vorschaubild öffnet die Aufnahme in der Lightbox.“Der Name stammt vom Leuchttisch der Fotografen, auf dem einzelne Dias betrachtet wurden.
Abgrenzung zum Modal: Die Lightbox ist ein Modal, das auf Bilder zugeschnitten ist. Ein Modal trägt beliebige Inhalte, auch Formulare und Rückfragen.
Was die Lightbox können muss
Sie muss sich vollständig mit der Tastatur bedienen lassen: Escape schließt, die Pfeiltasten blättern, und der Tabulator bleibt innerhalb der Überlagerung, solange sie offen ist. Beim Schließen gehört der Fokus zurück auf das Vorschaubild, aus dem sie geöffnet wurde.
Für die Umsetzung bringt HTML mit dem dialog-Element alles Nötige mit: Es verwaltet den Fokus, blendet den Rest der Seite für Vorlesewerkzeuge aus und schließt auf Escape von selbst.
Die Seite darunter muss stillhalten
Solange die Lightbox offen ist, darf die Seite dahinter nicht mitscrollen. Üblich ist, das Scrollen am Dokument zu sperren und die erreichte Position zu merken. Wird das vergessen, steht der Besucher nach dem Schließen an einer anderen Stelle der Seite als vorher.
Auf dem Smartphone braucht das Bild die volle Breite und eine Schließfläche, die mit dem Daumen zu treffen ist. Wischgesten nach links und rechts sind dort die erwartete Art zu blättern.
Wann die Lightbox stört
Bei einzelnen Bildern, die ohnehin groß genug dargestellt sind, bringt sie nichts und kostet einen Klick. Auch für Inhalte, die jemand verlinken oder über die Suche finden soll, ist sie falsch, denn der Inhalt einer Lightbox hat keine eigene Adresse.