Galerie mit CSS Lightbox

[Gunnar Bittersmann]

@@Bimmelbeule

Die Ursache deines Ladeproblems hat @Rolf B ja schon genannt. Dein Bedienbarkeitsproblem erwähnte er auch schon.

Ich habe eine Galerie basierend auf diesen Code hier erstellt:
CSSBox Projektseite […] Was mache ich falsch?

Du verwendest eine Lightbox, die vor Fehlern nur so strotzt.

Und das steht auch schon in der Beschreibung: „Absolutely no JavaScript“. Welch ein Unsinn! Das kann nur schiefgehen.

Damit das „funktioniert“ (in Anführungszeichen, denn funktionieren tut das nicht), werden falsche HTML-Elemente verwendet. Die Pfeile für voriges/nächstes Bild und das ‚ב zum Schließen müssen buttons sein, keine Links.

Und sie müssen (selbst wenn man Links dafür missbraucht) eine Beschriftung haben. So etwa:

<button>
  <span aria-hidden="true">&lt;</span>
  <span class="visually-hidden">voriges Bild</span>
</button>

mit dem CSS-Code von How-to hide content. (Es gibt Unicode-Pfeile, die besser aussehen als ‚<‘.)

Bei geöffneter Lightbox kann man den dahinter liegenden Seiteninhalt scrollen, was nicht sein sollte.

Bei Tastaturbedienung (Tab-Taste) kommt man aus der Lightbox raus, was nicht sein sollte. Zumal man gar nicht sieht, wo man hingelangt. Entweder muss sich die Lightbox automatisch schließen oder der Tastaturfokus muss in ihr bleiben (focus trap).

Wenn man ein modales Dialogfenster will, dann nimmt man ein dialog-Element mit seinen Methoden showModal() und close().

Siehe TIL about showModal und die dortigen Links (auch hier ins Forum) und das Codebeispiel. (Was dort nicht implementiert ist, sind die Pfeile zum vorigen/nächsten Bild.)

Zu modalen und nicht-modalen Dialogfenstern siehe Hidde de Vries’ Präsentation „Dialog dilemmas and modal mischief“ (Kurzfassung; Langfassung, Video).

🖖 Живіть довго і процвітайте