Tumblr Masonry с проблемой фотосет PXU

Question

У меня проблема с PXU Photoset Extended, который не загружается должным образом, когда я использую Masonry для моей темы Tumblr. Я знаю, что вызывает это, я просто, к сожалению, понятия не имею, как это исправить.

Единственное, что я нашел, что уменьшило мерцание при загрузке Masonry, это скрыть контейнер с помощью CSS (display:none) и затем показать его при загрузке скрипта Masonry.

Кажется, что это было странным побочным эффектом сценария PXU Photoset, который не рендерил изображения должным образом (они в основном обрезаются, и они изменяют свой размер при изменении размера окна).

Поэтому я использую этот код для вызова Masonry, ImagesLoaded и 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 );
        });
    });

});

И тогда PXU Photoset Extended:

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

Единственное, что заставило фотосет правильно отображаться, это снятие дисплея: нет; из контейнера, но затем Masonry снова выскочил из контейнера при загрузке страницы, что я, кажется, не могу исправить каким-либо другим способом.

Любая помощь высоко ценится,

Спасибо.

Answer 1

Плагин PXU Photoset требует, чтобы на странице были видны фотосеты, чтобы он мог рассчитать доступную площадь. Вместо того, чтобы использовать display: none; на контейнере попробуйте использовать visibility: hidden; а затем измените его на visibility: visible; после того, как масонство закончилось.

Кроме того, вы должны убедиться, что плагин Photoset запущен до того, как Masonry сделает первый проход по вашей теме.