Question

I have been reading stack overflow for a solution but can’t find it.

(full size image at https://i.stack.imgur.com/n0hd0.png)

When I load the page it looks like that

Here is the site (beta)

http://e-gimnazija.hostoi.com/test/site/index.html

If you press all it unfolds, maybe I can solve it if it auto unfolds at the start

Answer 1

The problem is that when you run .isotope the images are not yet loaded, so the plugin cannot calculate their size..

You have some different options to choose from

1. Start isotope after the images have loaded.. $(window).load(function(){/*init plugin here*/})
2. Use the imagesLoaded plugin: http://isotope.metafizzy.co/docs/help.html#imagesloaded_plugin
3. call reLayout once the images are loaded $(window).load(function(){$('#thumbs').isotope('reLayout');});
4. if the li elements are fixed size, then give them dimensions through CSS, and isotope will pick them up..