Bildergalerie mit CSS und Zoom

[Kirsten]

Hallo, ich habe eine Bildergalerie, die in CSS soweit gut funktioniert. Auch den Zoom habe ich dank verschiedener Beiträge hinbekommen.

ABER, wenn es um die Höhe des Grid-Containers geht, kann ich das nicht berechnen sondern nur, indem ich die Höhe (Variable "--h") fest definiere. Irgendwie bekomme ich es nicht hin, diese zu berechnen. Die Fotos sind im Format 3/2 Querformat. Ist die Höhe der einzelnen Img nicht proportional zum Foto, wird halt nur ein Teil in der Galerie angezeigt.

Sobald ich height mit Prozentangabe definiere oder mit Calc berechne, verschwindet der Container, da er nur 50px hoch ist.

Der Code ist als Bild angehängt, da ich den hier nicht leserlich einfügen kann.

Es ist ein ganz einfaches Testscript, aber ich komme einfach nicht weiter.

Über Hilfe wäre ich wirklich mehr als dankbar.

[Kirsten]

[Rolf B]

Hallo Kirsten,

ich kann mir nicht vorstellen, wie das funktionieren soll (abgesehen davon, dass es definitiv NICHT funktioniert, wenn ich keine Maus habe). Eigentlich müsste Dir der Hover das Layout zerreißen. Und selbst wenn er es nicht täte, die

Für eine Tastatursteuerung braucht es etwas fokussierbares. Bilder sind das nicht - dafür verwendet man Buttons oder Links. Die kann man mit der :focus-Pseudoklasse behandeln.

Ein Link auf die "funktionierende" Seite wäre sehr interessant. Dann kann man vermutlich auch besser erkennen, was mit der Höhe schiefgeht. Aus deinen aufwändigen Berechnungen, die Du da anstellst, werde ich nämlich überhaupt nicht schlau. Die Berechnung von --w scheint mir komplett daneben - wenn Du 3 Spalten hast, rechnest Du da 100% minus 2*3. Müsste das nicht 100% - var(--gs) * var(--g) sein? Warum verwendest Du --gs überhaupt, wenn Du doch anderswo ständig var(--m) - 1 verwendest?

Was Du jedenfalls beachten musst: Die Berechnungen sind "Live-Werte". Wenn sich dein Grid verbreitert, weil ein Bild durch den Hover breiter wurde, dann verändert sich dein 100% auf einmal. Wenn überhaupt, solltest Du die Breite eines einzelnen Bildes aus der Viewportgröße berechnen und nicht als ein Drittel der "natürlichen" Galeriebreite.

Wenn Du dein CSS posten willst, dann bitte nicht als Bild. Das schreibt keiner ab und es braucht auch viel Speicher. Zum Formatieren von Code verwendet man ~~~ Zeilen. Wie das funktioniert, findest Du in der „Hilfe zur Formatierung der Beiträge“ unter Abschnitt 9, Code. Wenn es Dir nicht 100% gelingt, lass deinen Versuch einfach stehen, wir formatieren das dann fertig.

Rolf

[Kirsten P]

Hallo Rolf, erstmal danke für die schnelle Antwort.

Prinzipiell funktioniert es tatsächlich. Auch am Handy. Habe es mal auf meine Webseite geladen.

www.kmprescher.de

Natürlich mit fester Höhe von 120px, was ja nur bei einer Bildschirmbreite von ca. 600 px passt.

Ja, ich muss das Ganze noch optimieren und unnütze Kommandos entfernen. War ich gestern nicht mehr fähig zu.

Ist nur ein einfaches Beispiel. Aber das responsiv schafft mich. 😀

[Mitleser 2.0]

www.kmprescher.de

Zuppelt und springt bei mir via Maus-Bedienung gar fürchterlich hin und her. Außerdem werden 40MB an Bildern ungefragt übertragen.

[Rolf B]

Hallo Mitleser 2.0,

ja, auf die Masse an Datenvolumen hab ich ja schon hingewiesen. Da muss auf jeden Fall eine Größenoptimierung erfolgen.

Die Zappelei kann daran liegen, dass die <img> Elemente die direkten Kind-Elemente des Grid sind, oder an der gesamten Rechnerei. Ich habe jetzt, wo ich das mal gesehen habe, so etwas ähnliches in Fiddle nachgebaut und da bewegt es sich smooth - aber da sind die img Elemente in Buttons eingepackt und ich skaliere die Buttons. Anderswo mehr dazu.

Rolf

[Rolf B]

Hallo Kirsten,

naja, ich hab auch mal gebastelt.

Diese CSS-only Galerie funktioniert mit Tastatur und Maus, und sie passt sich in der Breite auf 2, 3 oder 4 Bilder an. Wenn sie das Kreuzfeuer der Forenkritik übersteht (und der Verein seine MV), bring ich die vielleicht auch noch ins Wiki.

Es bräuchte nur noch eine Prise JavaScript, um die Pfeiltasten zu unterstützen und um mit Esc den Fokus wegzunehmen.

Um das CSS nicht zu gruselig groß werden zu lassen, verwende ich CSS-Nesting. Danke @Gunnar Bittersmann, das ist einfach nur geil.

Rolf

[Kirsten]

Danke für die Links. Werde mich da mal durcharbeiten und mein Script anpassen.

Vielen, lieben Dank.

[Rolf B]

Hallo Kirsten,

so, ich denke, ich habe jetzt eine Idee für die Höhenberechnung.

Das Problem ist, dass Du nicht so einfach den Wert für --w in die Berechnung für --h übernehmen kannst. Denn custom properties sind keine Variablen. Wenn Du in --w einen aufwändigen calc() Ausdruck speicherst, dann speicherst Du nicht dessen Ergebnis, sondern den calc()-Ausdruck. Und wenn Du dann var(--w) irgendwo einsetzt, wird dieser calc()-Ausdruck eingesetzt.

Konsequenz: Deine 100% Angabe ist auf einmal nicht mehr 100% der Body-Breite, sondern 100% der Body-Höhe. Dummerweise ist die Höhe einer Seite inhaltsabhängig, du hast dadurch einen Zirkelbezug und die Höhe bleibt 0.

Eine bessere Idee könnte 100vw sein statt 100%, das ist 100% Viewportbreite. Davon muss man auf jeden Fall noch den horizontalen Margin des Body abziehen. Blöd wird es, wenn die Seite einen vertikalen Scrollbar bekommt, dessen Breite muss man nämlich auch noch abziehen - und eine Maßeinheit, die sich auf "Viewportbreite minus Scrollbar" bezieht, habe ich nicht gefunden. Es gibt zwar dvw (dynamic view width), aber das gilt wohl nur für Mobilgeräte im Querformat, wo die Android/iOS-Controls ein- und ausgeblendet werden können.

Deshalb habe ich überlegt, dass man die Box, der die Galerie enthält (bei Dir den Body), zum Container macht (container-type: inline-size). DANN kann man die Einheit 100cqw verwenden, um 100% der Containerbreite anzusprechen, und 100cqw bleiben auch dann 100% der Breite, wenn man das in eine Höhenberechnung einsetzt.

Ich habe auch wieder die @media-Abfrage eingebaut, um die Anzahl der Spalten von der Viewportbreite abhängig zu machen, aber ich habe gemerkt, dass ich da bei der Höhenberechnung auf die Nase falle. Leider ist die round()-Funktion in Chromia noch nicht verfügbar, so dass ich nicht sagen kann: Anzahl Bilder durch Anzahl Spalten, aufgerundet. Deswegen habe ich --rows in der Mediaquery explizit gesetzt. Wenn Du das vom Server per PHP generierst, kann man das entsprechend vorbelegen. Sinnvoller wäre vermutlich, hier mit JavaScript und der matchMedia-Funktion zu arbeiten (oder darauf zu warten, dass die Chromia sich endlich bequemen, CSS Values Level 4 umzusetzen).

https://jsfiddle.net/Rolf_b/4e2cgxkm/

Das vom Mitleser festgestellte Zucken kann ich bei meinem Beispiel nicht feststellen, vielleicht liegt's an den Buttons.

Und ideal für kleine Viewports ist's auch nicht, da muss man den Galeriemodus vermutlich komplett deaktivieren.

Und was ich noch nicht kapiert habe, ist, warum dieser Trick mit width:0 und min-width:100% funktioniert, damit das Grid sich automatisch anpasst. Vor allem darf man dann beim Hover die Breite nicht auf 150% der berechneten Bildbreite setzen, sondern nur auf 50%, andernfalls wird das Bild viel zu riesig. Strange.

Rolf