jQuery masonry breaks in PinBin WP Theme | Fixed

By Cris, August 26, 2015
Last updated: August 23, 2016
Edit

jQuery Masonry breaks {Fixed}

 

Update! 23.08.2016 – The latest WP 4.6 update broke the layout again. I’ve since replaced PinBin‘s included masonry js code with the current masonry.js from the original author and loaded it up in PinBin.

I noticed that the jQuery masonry breaks its layout on a page load, following a recent update of either WP core or the WP PinBin theme,. It doesn’t break the content – it just stacks all masonry elements in a tall ugly column. A resize of the browser window makes it work again so I decided to look into this issue.

After many frustrated searches, I couldn’t find the issue and decided to abandon it until a second try. I’m happy to report that, thanks to some informative posts on jQuery, masonry.js, and imagesLoaded, I was able to modify the key .js file in the PinBin theme and rectify the problem.

FTP into your theme’s directory (../www/wp-content/themes/pinbin/js) and modify functions.js

PinBin’s functions.js code

/* General Pinbin Functions
================================================== */
// masonry customization
jQuery(document).ready(function($) {
    var post_area = $('#post-area');
    post_area.imagesLoaded(function(){
        post_area.masonry({
                // options
            isAnimated: true,
            animationOptions: {
                duration: 300,
                easing: 'linear',
                queue: false
            }
        });
    });
});

The fix:

Wrap the original segment of masonry code in the following function:

$(window).load(function(){—original masonry code—});

From my understanding, this allows for all required resources to load before execution of the masonry function, not just required images.

jQuery(document).ready(function($) {
    var post_area = $("#post-area");
    post_area.imagesLoaded(function() {
        $(window).load(function() {
            post_area.masonry({
                isAnimated: !0,
                animationOptions: {
                    duration: 300,
                    easing: "linear",
                    queue: false
                }
            });
        });
    });
});

Thanks to the following forums for providing information on $(window).load(function() {} for masonry and identifying the problem code imagesLoaded.

What do you think?

Leave a Reply

Your email address will not be published. Required fields are marked *