Images height and position problem – masonry, isotope
With the responsive web design, people started to resize windows to see how well websites adapts. Of course if they came exactly for that. Normal visitors that came to read or see something don’t do that. But anyway lately I saw a lot more websites that are using masonry or isotope. Probably because it have this nice “shuffle” effect when resizing (also sorting). It works by geting absolute positions and dimensions of elements. The problem is, that in the responsive design (or fluid) we don’t specify image dimension so it could resize nicely. I will be reffering to Masonry as it’s totally free to use but the solution applies to isotope as well.
Problem
In jQuery we usually initiate things in $(document).ready(). So if you initialize masonry like this:
$(function(){
var $container = $('#container');
// initialize
$container.masonry({
itemSelector: '.item'
});
});
and you have images inside your item without specifying dimensions you can get this:
That’s not good. Images are overlaping each other. My cats are NOT happy.
Why images are overlapping each other?
As I wrote at the beginning, libraries are getting absolute positions and dimensions. Obviously you can’t get proper values of something that doesn’t exist yet. By placing initialization in $(document).ready() almost certainly you will face this issue in first page load. Why? Because it’s fired when document is ready, and it’s usually much earlier than all images are. There is a chance that next time it’s gonna be fine if browser use cached images.
Solution number 1
Just place masonry initialization in $(window).load() instead of $(document).ready().
$(window).load(function(){
var $container = $('#container');
// initialize
$container.masonry({
itemSelector: '.item'
});
});
That way it will initialize AFTER all resources are loaded. At this point we can get correct values and it looks good
and my cats are happy ;o)
Solution number 2
Waiting untill all resources are loaded is a good solution if you don’t have that many resources to load. If you have lots of them you should look into imagesLoaded. The solution with imagesLoaded is actually described on masonry appendix page therefore I’m not gonna repeat it :o)
Thanks a lot! solved the overlapping issue.
Thank you very much Eliza for sharing these solutions. I had an overlapping issue with filter grid items in FF and your advice worked like magic. You rock!
Happy to help! :o)
Thank you!!!!
??Thanks a lot, You save me!!!
thanks a lot !!
Thanks a lot!
gracias amigo
Спасибо большое!
Great hack! Got a happy client now, thank you so much!
Beautiful! Because the overlapping happened with text and images for me, it looked rather chaotic, so it didn’t occur to me, that the images caused the problem, because masonry is applied before the image dimensions are known.
Thank you for leading me on the right track!
Hey, thanks about it. Good stuff. The solution with imagesLoaded works perfect – that fully solved my problem.
Thank you..
You save my day ;-) Thank you!!!
Thank you.
Thank you so much!
Thanks
Thanks eliza …
good Solution for the image overlapping problem…
Thank you.
You save me!!! Thank you.