Tumblr砖石与PXU Photoset问题 [英] Tumblr Masonry with PXU Photoset Issue

问题描述

我有这个问题与PXU Photoset扩展没有正确加载，当我使用Masonry我的Tumblr主题。我知道是什么原因导致它，我只是悲伤地没有线索如何解决它。

我发现，减少闪烁，当Masonry加载，是隐藏容器与

这似乎有一个奇怪的副作用的PXU Photoset脚本不能正确渲染图像

所以我使用这个代码来调用Masonry，ImagesLoaded和无限滚动：

p>

  $（document）.ready（function（）{
 
 var $ container = $ '）; 
 
 $ container.imagesLoaded（function（）{
 $ container.show（）; 
 $ container.masonry（{
 itemSelector：'article' ，
 gutter：50，
 isFitWidth：true，
}）; 
}）; 
 
 $ container.infinitescroll（{
 navSelector ：'＃pagination-infinite'，//用于分页导航的选择器
 nextSelector：'＃pagination-infinite a.next'，//用于NEXT链接的选择器（到第2页）
 itemSelector：文章，//所有你要检索的项目的选择器
 animate：true，
 extraScrollPx：310，
 bufferPx：40，
 loading：{
 msgText： ''，
 finishedMsg：''，
 img：'http://static.tumblr.com/amhdmud/iMBn235bd/1x1.png'
} 
}，
 //触发Masonry作为回调
 function（newElements）{
 //在加载时隐藏新项目
 var $ newElems = $（newElements）.css（{opacity：0 }）; 
 //确保图像在添加到masonry布局之前加载
 $ newElems.imagesLoaded（function（）{
 //显示elems现在他们准备好
 $ container.masonry 'attached'，$ newElems，true）; 
}）; 
}）; 
 
}）; 
  

然后PXU Photoset Extended：

  $（document）.ready（function（）{
 $（'photo-slideshow'）。pxuPhotoset（{
'rounded'：'false' / corner，all或false 
}，function（）{
 // Callback 
}）; 
}）; 
  

使photosets显示正确的唯一方法是删除显示：none;从容器中，但随后Masonry从页面加载的容器中闪烁，我似乎无法解决任何其他方式。

任何帮助是非常赞赏， p>

谢谢。

解决方案

PXU Photoset插件要求页面可见，以便它可以计算可用区域。不要在容器上使用 display：none; 尝试使用 visibility：hidden; ，然后将其更改为 visibility：visible;

此外，您还需要确保Photoset插件正在运行之前 Masonry首次通过您的主题。

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.

解决方案

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砖石与PXU Photoset问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！