Bildergalerie (war: Frage zum Wiki-Artikel „Impressum“)

[Kitkun]

Hallo wer kann mir bitte weiterhelfen?

Ich möchte bitte eine Fotogalerie erstellen und würde gerne die Fotogalerie nach diesem Beispiel https://www.christianreister.com/berlin-nights/ gerne aufbauen.

Wie funktioniert das, hat jemand Ahnung wie ich das hinbekomme.

Danke für die Unterstützung.

PS: Es geht nur um die Fotogalerie (.gallery-container), kein header, eine nav, etc...

[Matthias Scharwies]

Servus!

Hallo wer kann mir bitte weiterhelfen?

Ich möchte bitte eine Fotogalerie erstellen und würde gerne die Fotogalerie nach diesem Beispiel https://www.christianreister.com/berlin-nights/ gerne aufbauen.

Wie funktioniert das, hat jemand Ahnung wie ich das hinbekomme.

Schau dir die Seite im Seiteninspektor an. Speicher sie lokal ab und passe sie an Deine Bilder an.

Hier ist ein Tutorial zu einem Bildwechsler:

• JavaScript/Tutorials/DOM/DOM-Manipulation

Danke für die Unterstützung.

Gern geschehen!

Herzliche Grüße

Matthias Scharwies

PS: Hast Du dir den Titel Deines Posts („Frage zum Impressum“) mal vorher angeschaut?

[Rolf B]

Hallo Kitkun,

Christian Reister verwendet Wordpress und ein Plugin für die Masonry Gallery. In den Quelldaten heißt es "destaca masonry gallery", bei schnellem Googeln finde ich das nicht. Keine Ahnung, welches Plugin das ist. Kannst ihn ja mal fragen.

Wenn Du kein WordPress hast oder dieses Plugin nicht haben willst, bekommst Du Arbeit.

Was genau möchtest Du vom Reister-Layout übernehmen:

• Das Masonry-Layout in vertikaler Ausrichtung?
• Das Abdunkeln des Bildes beim Hovern?
• Die Zoom-Animation vom Thumbnail zum Vollbild?
• Das lazy-Loading der Thumbnails?
• Weiteres?

Was Du nicht übernehmen solltest:

• Die umständliche Von-Hand-Berechnung der Bildpositionen. Dafür gibt's andere Möglichkeiten
• Die vorsätzliche Sabotage der Tastaturbedienung, indem das per Tab fokussierte Thumbnail nicht hervorgehoben wird
• Das vogelwilde Springen des Fokus bei Verwendung der Tab-Taste. Das ist allerdings auch dem Masonry-Layout geschuldet, das es beim Tabben schwierig macht, das richtige "nächste" Bild zu bestimmen
• Den falsch positionierten Fokus auf das Thumbnail, wenn man in der Großansicht die Ansicht gewechselt hat
• Den Aufruf eines Trackers, der alle paar Sekunden nach Hause telefoniert- Keine Ahnung, ob das durch legitimes Interesse abgedeckt ist.

Für's Masonry-Layout habe ich mal mit der columns-Eigenschaft gespielt. Die Spaltenbreite kann man, jetzt wo der Firefox fertig ist, mit Hilfe einer Containerquery die Spaltenzahl passend zur Galeriebreite einstellen.

@container und nicht @media, damit man für die Bestimmung der Spaltenbreiten nur die Galeriebreite kennen muss und nicht das ganze Seitenlayout.

Look Ma, no JavaScript

Nachteilig ist an dieser Idee vielleicht, dass die Bilder spaltenweise angeordnet werden, was nicht der Leserichtung entspricht. Bei einem Masonry-Layout ist es allerdings grundsätzlich schwierig, quer zur Richtung der "Steinlage" zu traversieren.

Lazy-Loading zusammen mit vertikalem Masonry-Layout setzt auch voraus, dass man die Höhe der Bilder im Markup notiert. Andernfalls kann der Browser den Umbruch nicht berechnen, ohne die Bilder zu laden.

Nichts für schwache Nerven, alles in allem betrachtet.

Rolf