Develop Reference

Masonry Overlapping Tumblr Photosets

I have been attempting to create a Tumblr layout with 3 columns using Masonry and ImagesLoaded. However, I have issues with the photosets overlapping. I'm also using PXU Photoset.
Problem:
During the first seconds, the blog looks broken: http://s11.postimg.org/ry4fa614j/Overlapping.jpg
Then, it fixes into sorted columns: http://s16.postimg.org/i13qld4hh/no_Overlapping.jpg
Also, the overlapping happens only with the photosets posts. Any other type of post (including those with only 1 image) work fine.
My Code:
So far, this is the code that works the best for me, but produces the problem I said before:
var $container = $('#threeCol');
$container.masonry({
itemSelector: ".post",
transitionDuration: 0
});
$(document).ready(function(){
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '0px',
borderRadius: '0px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'}, function () {
$container.imagesLoaded(function(){
$('#threeCol').masonry({
percentPosition: true,
columnWidth: '.post',
itemSelector: '.post',
gutter:20,
resize: true
},
function() {
$('#threeCol').masonry({
appendedContent: $(this)
});
});
}).resize();
$('.post img').imagesLoaded(function() {
$('#threeCol').masonry({
percentPosition: true,
columnWidth: '.post',
itemSelector: '.post',
gutter:20,
resize: true
}).resize();
});
});
});
In here, threeCol is my container and post is each individual post that I want to fit in the grid.
Also, I am not using InfiniteScroll.
Goal:
I would like for the content to load fast and not look broken on the first seconds of loading.
I have already tried:
Since I've been dealing with this problem for days, I have already attempted several things.
$(window).load(...);
This doesn't work at all with my current code. And when it works, it is extremely slow, and user-experience is bad.
Regarding other posts with solutions, I have tried a lot of them, including:
Masonry JS Overlapping Items
Tumblr Masonry with PXU Photoset Issue
Using masonry with imagesloaded
Masonry overlapping issue
Masonry Overlapping (Imbalance2 Bug)
And others on GitHub and links I can't find again.
Thanks for reading my question, and any help will be very welcome!
EDIT:
My question is different from several before, because my issues are photosets (which are groups of two or more images that go on the same post, therefore, are part of the same grid element) instead of individual images. I also do not know how many images are part of each photoset, and I do not know their sizes either.
Photosets are a type of post inside of Tumblr.

Divs are overlapping with Isotopes

Im using isotopes for my page and my divs that have images are overlapping.
This issue is only happening SOMETIMES the first time I access a page on my browswer and ALL the time on phone. It never happens when accessing the page locally though.
I already tried using .imagesLoaded but it doesn't seem to be working.
Any recommendations?
http://orianadesigns.com/4foodesses

Unloaded images can throw off Isotope layouts and cause item elements to overlap. imagesLoaded resolves this issue.
You need to install imagesLoaded.js and then call isotope like this:
var $container = $('#container');
// init
$container.imagesLoaded( function(){
$container.isotope({
// options
itemSelector: '.box',
layoutMode: 'masonry'
});
});

Giving the images a fixed width/height solved this problem for me.

Isotope in IE9 shows all in one column

I'm using Metafizzy's Isotope, and when I test it in IE 9, the elements goes in one column, instead of 4 per row.
It works in all other browsers, even IE8.
Here's the Isotope code I'm using:
var $container_gd = $('#gd .program-content').isotope({
itemSelector : '.student-gd',
layoutMode: 'fitRows',
getSortData: {
name: '[data-name]'
},
sortBy: 'name'
});
I also have filtering buttons, and those work fine, it's just the layout that's broken.
Here's the codepen: http://codepen.io/anon/pen/vtgwK
Any ideas how it could be fixed?

I posted the question at the Isotope GitHub repository, and I got my answer there. I had set a margin auto to the items that are being sorted, and IE9 counted the centering as part of the width of the item. Setting the margin to 0 fixed the issue.

JQuery Isotope container height issue w/ iDangero.us Swiper

EDIT: The script is triggered and performing correctly when the window is being resized. Thanks a lot Сър Георги Демирев!
I've been pondering over a problem for a long while and I just can't seem to get a grip on it. On a photography portfolio site I use iDangero.us Swiper for a slideshow and JQuery Isotope for a thumbnail gallery.
Now, it works fine on Firefox and Chrome on Linux and Windows 7 alike.
However, on IE, Safari and Opera the grid items are showing in a vertical line, rather than a grid.
In order to locate the error I stripped the code from everything until I found out that Isotope stops this behaviour when I remove the Swiper part of the code.
The parent divs show to have 0 px height. Changing these to a fixed height (e.g. 1000px or 100%) doesn't change anything.
Here's the original site: http://anthron.octans.uberspace.de/meta.php
Here's a minimal example that still produces the error:
http://anthron.octans.uberspace.de/meta.debug.php
And the minimal source code: http://pastebin.com/H6t9bbNC
EDIT: Here's an implementation of Сър Георги Демирев's suggestion:
http://anthron.octans.uberspace.de/meta.debug.2.php
It works now, however the margin-right after the grid items are gone and return only after window resize. However one step further now.
I'm very grateful for any suggestion, I'm quite clueless about this one...

I had a similar problem recently and the fact that images are stacked one under another probably means that the script is not loading. However, if you resize the browser window a little bit, the script is triggered and images are places the way they should.
Wrap this code
imagesLoaded( '#thumbnailgallery', function(){
var $container = $('#thumbnailgallery');
$container.isotope({
itemSelector: '.element',
layoutMode: 'masonry',
masonryHorizontal: {
columnWidth: 240,
rowHeight: 240,
gutterwidth: 50},
});
});
in (document).ready function like this:
$(document).ready(function () {
imagesLoaded( '#thumbnailgallery', function(){
var $container = $('#thumbnailgallery');
$container.isotope({
itemSelector: '.element',
layoutMode: 'masonry',
masonryHorizontal: {
columnWidth: 240,
rowHeight: 240,
gutterwidth: 50},
});
});
});

jquery isotope plugin container height will not grow with isotope-item (same with masonry)

I have an isotope-item that will grow in height when somebody comments inside of it. When it grows, how do I tell the main isotope container to grow with it? Right now what is happening is, as the isotope-item grows, the isotope container maintains it's initial height that was set when calling $(".home_main").isotope(); So when I leave comments inside the isotope-item, the item grows, then is cut off by the main container. Thanks.
I have seen that you can set resizesContainer: true but this hasn't helped me. Thanks.
Not sure if it makes any difference but I have also tried this with the Masonry jquery plugin as well (seems pretty similar) and had the same problem.

Found the answer here:
https://github.com/desandro/isotope/issues/275
You have to call relayout like this:
$("#your_container").isotope( 'reLayout' )

In Isotope V2 the syntax is
$("#your_container").isotope('layout')

In Isotope PACKAGED v2.2.2, you can also 're-arrange / re-layout' your container:
$(window).scroll(function(){
$container.isotope( 'layout' );
}

In Isotope V3
$(window).on('load', function(){
var $container = $('#your_container');
$container.isotope({
itemSelector: '.item'
});
});

If your using the latest isotope, (not specified version but you can see the date of this comment) read the first link and include the appropriate couple of lines and include the library from the second link.
http://isotope.metafizzy.co/appendix.html
http://imagesloaded.desandro.com/