Isotope folded (elements overlap)
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
- Start isotope after the images have loaded..
$(window).load(function(){/*init plugin here*/})
- Use the imagesLoaded plugin: http://isotope.metafizzy.co/docs/help.html#imagesloaded_plugin
- call
reLayout
once the images are loaded$(window).load(function(){$('#thumbs').isotope('reLayout');});
- if the
li
elements are fixed size, then give them dimensions through CSS, andisotope
will pick them up..
I fixed it with jquery:
<script type='text/javascript' >
$(window).load(function() {
$.getScript('/js/jquery.isotope.min.js', function() { });
});
</script>
This waits for the whole page to be loaded, then loads the isotope script last. Below, I have a more complete solution, using a "working" notification and a spinner until everything gets loaded. The spinner is from font-awesome icons...
<div class="container wrapper">
<div class="inner_content">
<div class='working' >
<h2>working... <i class="icon-spinner icon-spin icon-large"></i></h2>
</div>
</div>
</div>
<script type='text/javascript' >
$(window).load(function() {
$.getScript('/js/jquery.isotope.min.js', function() {
$('.working').fadeOut();
});
});
</script>
You can see my working example at: http://ericavhay.com/painting/portfolio