Masonry - loading and positioning

1 reply · opened Sep 20, 2021

Mmarko01845Sep 20, 2021

Hello!

Is there any way how to prevent positioning images when I open an link?

e.g. http://themes.semicolonweb.com/html/canvas/portfolio-mixed-masonry.html

Hit Ctrl+F5, and you will see that images are try to find position and they are "traveling", how to fix that traveling, I know position of every images (and that positions will not change), so, can I "reserve" space for images, so when images will load they knows their position.

SSemicolon WebSTAFFSep 20, 2021

Hello,

The Masonry Layout are designed to fit the items according to the available space, by default. The traveling Items are due to the Flex Slider within the Masonry Layout as they are loaded on Page Load and then the Items are adjusted according their Heights. You can disable the traveling transition by adding the data-transition="'0s'" Attribute to the .grid-container DIV:
[ch_pre][/ch_pre]

This should work fine. Hope this Helps!

Additionally, it is to be noted that since this is a JS Solution, a slight delay in Masonry Layout is expected as the function is executed once the JS is available on the Page. We will keep improving this with better solutions in the Future Versions of Canvas.

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard