CODEWITHSUNDEEP
jquerymasonry
user4785379
user4785379

Reputation:

Masonry overlapping with ImagesLoaded without Infinite Scroll in Tumblr

first time here. I'm trying to create my custom tumblr theme with 3 columns using Masonry plugin but i'm not going so well. The posts are overlapping and I'm not even using Infinite Scroll. I tried to use $(window).load(...) but it didn't work, I tried to use ImagesLoaded but it didn't work too, help me please ^-^ This is how the page is loading: http://s16.postimg.org/u17syta51/image.jpg, if I resize/refresh the page they go to the right position. This is my full code: http://pastebin.com/VLzwEfgP and my test tumblr url is entertain-us.tumblr.com (I can't put +2 links). Obs: the theme isn't complete yet because I don't know how to solve this problem.

jQuery (this is before </body>):

var $container = ('section#container');
$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: 'article.post',
        columnWidth: 400,
        isFitWidth: true,
    });
});

CSS 

section#container {
    position: relative;
    top: 50px;
    max-width: 1250px;
    height: auto;
    padding: 0px;
}

article.post {
    width: 400px;
    margin: 5px;
    margin-bottom: 10px;
    opacity: 0.7;
}

article.post:hover {
    opacity: 1;
}

Almost 2 years I don't program, so if I did any stupid mistake in my code, I would appreciate to know haha

Sorry any english mistake and thank you for your attention :D

--- SOLUTION ---

To solve the overlapping problem, as Macsupport said, I just needed to put the Masonry code inside $(document).ready, this way

var $container = $('section#container');    
$(document).ready(function(){       
    $container.imagesLoaded(function(){
        $container.masonry({
            columnWidth: 400,
            itemSelector: 'article.post',
            isFitWidth: true
        });
    });
});

I put the var $container = $('section#container'); before $(document).ready(); because the script was changing my container width to 800px (making only 1 column) and when I set the variable before activate the script it will not change it's width, I could just put isResizeBound: false inside masonry, but I still going to try make this layout change it's layout depending on window size, when I get success at it I'll update here. But for now the overlapping problem was solved.

Upvotes: 0

Views: 839

Answers (1)

Macsupport
Macsupport

Reputation: 5444

You have some mistakes in your js.

You are are missing the $ for jquery in your container variable:

 var $container = ('section#container');

Should be this:

 var $container = $('section#container');

Try this code: 

    var $container = $('section#container');
        $container.imagesLoaded(function(){
            $container.masonry({
                itemSelector: 'article.post',
                columnWidth: 400,
                isFitWidth: true
            });
        });

ADDENDUM

Put this code inside your 

$(document).ready(function(){

 });

not outside of it, as it is now. Also, why did you rename your imagesLoaded.js?

Upvotes: 1

Related Questions