Website springt mit Masonry Gallerie

[Kikaba]

Hallo zusammen,

ich bin am verzweifeln, wie wahrscheinlich viele Leidensgenossen hier im Forum.
Um ehrlich zu sein bin ich weit weg von einem Programmierer, aber bis dato konnte ich alle Probleme selbst lösen.
Ich habe das Problem, dass die Website http://test.event-loft.de "springt", wenn man die Seite unterhalb der Module aktualisiert oder eine direkte section-id unterhalb der Module aufgerufen wird.
Mittlerweile weiß ich, dass es an den neun Bildern der Masonry Gallerie liegt und habe das versucht via Preloader zu fixen, aber das hat leider auch nicht geklappt.
Hat vielleicht irgendjemand eine Idee, wie man das "Hüpfen" beseitigen könnte?
Ich bin über jede Hilfe sehr dankbar.

Viele Grüße,
Kikaba

[daniel5959]

Hallo,

es liegt daran, dass für die Bilder keine Größe definiert ist und der Browser nicht weis wieviel Platz er für die Bilder reservieren muss. Deshalb weis der Browser erst nach dem Laden der Bilder wieviel Platz er braucht und verschiebt den Inhalt entsprechend.

Da mit mehreren CSS- und einer Bootstrap-CSS-Datei gearbeitet wird, mal auf die CSS-Experten warten.

daniel5959

[Kikaba]

Hallo Daniel,

vielen Dank für deine schnelle Antwort. Klingt soweit schlüssig und logisch. Ich befürchte, dass dafür meine css Kenntnisse nicht reichen werden.
Mal sehen, vielleicht hat ja einer der CSS Experten einen guten Tipp
Danke nochmals!

VG Kikaba

[Sempervivum]

Ich könnte mir als Lösung folgendes vorstellen: Masonry hat ein Event "layoutComplete". Das könnte man benutzen, um die Höhe des umgebenden Containers im Localstorage zu speichern. Dann sofort beim Neuladen den Wert wieder auslesen und die Höhe des Containers einstellen. Müsste man versuchen, unklar ist, ob Masonry selber etwas mit der Höhe macht, das einem da in die Quere kommen könnte. Auch dann könnte es eine Lösung geben, indem man einen zusätzlichen Container darum herum legt, der von Masonry nicht beeinflusst wird.

[Kikaba]

Vielen Dank auch für deinen Denkanstoß, aber ich befürchte das übersteigt meinen Horizont
Klingt alles relativ kompliziert. Ich hatte gehofft mit einem min-height oder irgendetwas das Problem gelöst bekomme, aber....
Trotzdem Danke euch beiden für die Mithilfe und die Ansätze!

VG Kikaba

[ST747]

hallo,
bin mal auf die Seite gegangen,mir sind noch 2 Sachen aufgefallen.
Die Site hat kein Sicherheitszertifikat, die mit https:angezeigt wird, du hast noch http:
Das sollte nach dem Test umgestellt werden.
Außerdem wird ein Warnmeldung bei meinem Browser angezeigt, wegen einem automatischen TON auf der Seite,
ich habe den Ton ausgeschaltet.

Neben den von arnego vermutlich nicht definierten Bildgrößen die man unter css einstellen kann,
sieht es so aus, dass der Platz auf der Site ggf. nicht ausreicht und er das unten runter schiebt.
probiere einfach mal zum test es mit weniger bilder zu machen und schaue was dann passiert.
dann könntest du ja die seitenlänge ggf. in der höhe anpassen.

Ein Möglichkeit ist auch, die Bilder mit einem Bildbearbeitungsprogramm mal vom Format etwas kleiner zu machen.

Da hilft auch mal etwas auszuprobieren.


viele Grüße
Gerhard

[arnego2]

Neben den von arnego vermutlich nicht definierten Bildgrößen

Die Blumen gebühren daniel5959

[Kikaba]

Vielen Dank auch euch beiden für die Mithilfe.

@ST747: Das Sicherheitszertifikat kommt sobald die Website fertig ist und online geht
Der Ton ist in dem virutellen Rundgang hinterlegt. Sollte aber eigentlich nicht automatisch starten, wenn man nicht den Rundgang macht. Schaue ich mir nochmal an.

Ansonsten habe ich zur Behebung des eigentlichen Problems folgendes gemacht:
In CSS die Klasse eingefügt:

.masonry-height {
min-height: 1202px
}

Und dem Container von der Masonry Gallerie entsprechend die Klasse zugeorndet:

<div class="row masonry masonryFlyIn masonry-height">

Es scheint zu gehen, aber ob das wirklich noch responsiv ist wage ich zu bezweifeln...
Muss das jetzt erst mal ausgiebig testen...

VG Kikaba