0

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:

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.

Community
  • 1
  • 1
fercho27
  • 23
  • 1
  • 5
  • Possible duplicate of [Masonry images overlapping issue](http://stackoverflow.com/questions/7971258/masonry-images-overlapping-issue) – Gigamegs Mar 19 '16 at 17:47
  • @Phpdevpad No, this is not a duplicate. I edited my question with more details. My issue is with 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, so the answer you linked does not apply to my question. – fercho27 Mar 19 '16 at 19:07
  • If you can read my answer I use the find function to pick the image attribute. I think you can do that, too. – Gigamegs Mar 19 '16 at 19:18
  • @Phpdevpad I have already read and tried your answer to the other topic, and it doesn't work. You should also consider than in a photoset, images can go side by side and not only one under the other. I also cannot know how the images are ser (side by side, one under the other, or a mixture of both). – fercho27 Mar 19 '16 at 19:55
  • Sorry, I can't help. What does it mean "the images are ser"? The find function gives the images attributes! – Gigamegs Mar 19 '16 at 20:07
  • @Phpdevpad Sorry, typo. I meant that "how the images are set". Thanks for the help anyways. – fercho27 Mar 19 '16 at 21:25
  • You could try adding imagesLoaded around the first masonry call? – chloe784 Dec 13 '16 at 00:18

0 Answers0