Tumblr Masonry with PXU Photoset Issue

Question

I have this issue with PXU Photoset Extended not loading properly when I use Masonry for my Tumblr Theme. I know what causes it, I just sadly have no clue how to fix it.

The only thing I found that reduced flickering while Masonry loaded, was to hide the container with CSS (display:none) and then unhide it when loading the Masonry script.

It seems this had the odd side-effect of the PXU Photoset script not rendering images properly (they're mostly cut off and they jump into their real size when resizing the window).

So I use this code to call Masonry, ImagesLoaded and Infinite Scroll:

$(document).ready(function(){

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

    $container.imagesLoaded(function(){
        $container.show();
        $container.masonry({
            itemSelector: 'article',
            gutter: 50,
            isFitWidth: true,
        });
    });

    $container.infinitescroll({
        navSelector  : '#pagination-infinite',    // selector for the paged navigation
        nextSelector : '#pagination-infinite a.next',  // selector for the NEXT link (to page 2)
        itemSelector : 'article',     // selector for all items you'll retrieve
        animate: true,
        extraScrollPx: 310,
        bufferPx: 40,
        loading: {
            msgText: '',
            finishedMsg: '',
            img: 'http://static.tumblr.com/amhdmud/iMBn235bd/1x1.png'
        }
    },
    // trigger Masonry as a callback
    function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
            // show elems now they're ready
            $container.masonry( 'appended', $newElems, true );
        });
    });

});

And then PXU Photoset Extended:

$(document).ready(function() {
$('.photo-slideshow').pxuPhotoset({
'rounded'   : 'false', // corners, all or false
}, function() {
// Callback
});
});

The only thing that made the photosets display right involved removing the display: none; from the container, but then Masonry flickered out of the container on page load again, which I seem unable to fix any other way.

Any help is much appreciated,

Thank you.

score 1 · Answer 1 · answered Apr 04 '14 at 16:10

The PXU Photoset plugin requires that photosets on the page be visible so that it can calculate the available area. Instead of using display: none; on the container try using visibility: hidden; and then change it to visibility: visible; after Masonry has finished.

Also, you'll want to make sure the Photoset plugin is running before Masonry makes its first pass over your theme.

Tumblr Masonry with PXU Photoset Issue

1 Answers1

Linked