Galerie mit CSS Lightbox

[Bimmelbeule]

Hallo!

Ich habe eine Galerie basierend auf diesen Code hier erstellt:
CSSBox Projektseite

Diese Galerie hat viele Bilder (ich will die Galerie nicht in Garten-1, Garten-2, Garten-3, etc. unterteilen) und die werden beim aufrufen der Seite erst Mal alle geladen.

Ich hoffte, das »alle-auf-einmal-laden« mit loading="lazy" zu unterbinden. Das scheint laut Chromium -> DevTools -> Netzwerk mit den 800x600-Bildern auch zu klappen, aber nicht mit den 1920x1440-Bildern. Diese werden noch immer direkt nach dem Aufruf der Seite alle auf einmal geladen.

Im Augenblick sieht das so aus:
Meine Galerie

Was mache ich falsch?

Lg, Horst

[Rolf B]

Hallo Bimmelbeule,

Ich bin unterwegs und kann nicht ausprobieren. Ich weiß aber, dass lazy nur auf Bilder außerhalb des Viewports wirkt. D.h. verdeckte Bilder innerhalb des Viewports dürften trotzdem geladen werden.

Eine brauchbare Idee, wie du CSSBox pimpen kannst, kann ich dir von hier aus nicht geben.

Ich befürchte aber eines: eine reine CSS Lösung wird immer Probleme haben. Vor allem, wenn es um Bedienbarkeit geht.

Rolf

[Friedel]

Hallo Bimmelbeule

Auch ich bin nicht zuhause und kann daher nur sehr eingeschränkt testen. Bei deiner Frage kann ich dir deshalb nicht helfen.

Aber die Bi9lder werden bei dir furchtbar verzerrt, wenn man sie anklickt. Das Seitenverhältnis der vergrößerten Bilder muss sich nach dem Seitenverhältnis der Fotos richten, nicht nach dem Seitenverhältnis meines Viewports.

Was deinen Seitentitel betrifft, empfehle ich dir als Lektüre http://www.deppenapostroph.info/.

Das sind schöne Fotos, wenn sie nicht verzerrt sind.

[Bimmelbeule]

Hallo!

Aber die Bi9lder werden bei dir furchtbar verzerrt, wenn man sie anklickt. Das Seitenverhältnis der vergrößerten Bilder muss sich nach dem Seitenverhältnis der Fotos richten, nicht nach dem Seitenverhältnis meines Viewports.

Womit schaust du dir die Bilder an? In Firefox und Chromium, sowie auf Android und Ipad (jeweils verschiedene Browser) haben die Bilder ein korrektes Seitenverhältnis beim vergrößern. Hat noch jemand dieses Problem?

Das sind schöne Fotos, wenn sie nicht verzerrt sind.

Danke… ツ

Lg, Horst

[Fred]

Hallo Horst

Hat noch jemand dieses Problem?

spiel mal mit dem Höhen/Seitenverhältnis vom Browserfenster, dann sieht man es....

Gruß
Fred

[Bimmelbeule]

Hallo!

Hat noch jemand dieses Problem?

spiel mal mit dem Höhen/Seitenverhältnis vom Browserfenster, dann sieht man es....

Der Teufel auch! Tatsache!

Hatte ich nicht gesehen, weil ich mein Browserfenster nie/selten auf der vollen Breite meines HD-Monitors habe. Ich teste immer nur kleinere Viewports… offensichtlich ein Fehler!

Ich konnte das bereinigen, indem ich die Größenangaben für die 1920er-Bilder raus genommen habe (am Kopf kratz].

Danke, Leute, das ihr mich drauf aufmerksam gemacht habt!

Sieht jetzt so aus:
Meine Galerie (überarbeitet)

Gruß, Horst

Gruß
Fred

[MrMurphy]

Ich habe die Verzerrung mit Firefox und Chrome unter Windows auch.

[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).

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

[Bimmelbeule]

Hallo Gunnar!

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.

Danke für die vielen Tipps, Gunnar! Damit werde ich mich beschäftigen, wenn ich das »alle-auf-einmal-laden-Problem« mit loading="lazy" (oder wie auch immer) gelöst habe… ansonsten werde ich die CSSBox voraussichtlich eh nicht verwenden.

Gibt es keine Lösung wie ich das laden aller verdeckten Bilder innerhalb des Viewports ohne Javascript verhindere?

Gruß, Horst

[Gunnar Bittersmann]

@@Bimmelbeule

Danke für die vielen Tipps, Gunnar! Damit werde ich mich beschäftigen, wenn ich das »alle-auf-einmal-laden-Problem« mit loading="lazy" (oder wie auch immer) gelöst habe… ansonsten werde ich die CSSBox voraussichtlich eh nicht verwenden.

Die Probleme zu beheben heißt, diese CSSBox nicht zu verwenden.

Gibt es keine Lösung wie ich das laden aller verdeckten Bilder innerhalb des Viewports ohne Javascript verhindere?

Hm, deutete @Rolf B das mit „verdeckte Bilder innerhalb des Viewports dürften trotzdem geladen werden“ nicht an?

Was passiert, wenn du nicht opacity: 0, sondern display: none oder visibility: hidden verwendest?

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

[Bimmelbeule]

Hallo Gunnar!

Was passiert, wenn du nicht opacity: 0, sondern display: none oder visibility: hidden verwendest?

In beiden Fällen werden trotzdem die verdeckten Bilder im Hintergrund geladen (und es ist auch nur jeweils das letzte Bild in 1920x1440 zu sehen).

Gruß, Horst

[Gunnar Bittersmann]

@@Bimmelbeule

Was passiert, wenn du nicht opacity: 0, sondern display: none oder visibility: hidden verwendest?

In beiden Fällen werden trotzdem die verdeckten Bilder im Hintergrund geladen (und es ist auch nur jeweils das letzte Bild in 1920x1440 zu sehen).

Nein, bei display: none werden nicht angezeigte Bilder auch nicht geladen. ☞ Beispiel

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

[Bimmelbeule]

Hallo!

Was passiert, wenn du nicht opacity: 0, sondern display: none oder visibility: hidden verwendest?

In beiden Fällen werden trotzdem die verdeckten Bilder im Hintergrund geladen (und es ist auch nur jeweils das letzte Bild in 1920x1440 zu sehen).

Nein, bei display: none werden nicht angezeigte Bilder auch nicht geladen. ☞ Beispiel

Du hast recht. Der oben von mir genannte Fall ist die Anzeige mit »visibility: hidden«. Ich vermute beim ausprobieren von »display: none« habe ich versehentlich nicht abgespeichert, anders kann ich mir meinen Fehler gerade nicht erklären… togal!

Mit »display: none« wird also tatsächlich nichts im Hintergrund geladen, aber natürlich auch nichts angezeigt. Ist das eine rein theoretische Betrachtung oder kann ich mit dieser Erkenntnis die CSSBox soweit pimpen, das die Bilder im Sinne einer Lightbox angezeigt werden, ohne im Hintergrund geladen zu werden? Ich kenne mich mit CSS nicht gut genug aus, um das CSSBox-CSS zu durchblicken.

Gruß, Horst

[Gunnar Bittersmann]

@@Gunnar Bittersmann

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

Einen hatte ich noch im Kopf, dann aber vergessen aufzuschreiben: Die Lightbox sollte nicht nur beim Drücken auf ‚ב wieder verschwinden, sondern auch beim Drücken der Esc-Taste.

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