Question

在一个tumblr主题中，我试图串联使用许多脚本，从技术上讲，它们都在工作，但是似乎有一个小问题。根据我的判断，可能导致问题的脚本是无限滚动，砌体和pixelunion's extended photosets？

在“索引”页面上（我不确定如何引用它？我的意思是在无限滚动插入之前内容的第一个“页面”）一切都很好显示：扩展的照片集脚本。但是当通过无限滚动加载新页面时，所有照片集都显示为空白，根本没有内容

我首先遵循了其他人关于如何甚至一前一后安装这些脚本的指示，所以诚然，我真的不知道这里发生了什么，可以使用一些帮助

相关博客和后续主题位于here，如果有帮助，则位于this is the tutorial i followed

我很难显示此代码片段，请忍受我

这是我已经安装的砌体/无限滚动：

<script type="text/javascript">
$(window).load(function () {
$('#content').masonry(),
$('.masonryWrap').infinitescroll({ 
itemSelector : ".container", 
navSelector : "div.navigation",
nextSelector : ".navigation a#next",
bufferPx : 10000,
extraScrollPx: 10000,
loadingImg : "",
loadingText : "",
},
function() { $('#content').masonry({ appendedContent: $(this) }); 
});
 });</script>
<script 
src="http://static.tumblr.com/6hsqxdt/vmwm2rb4g/infinitescrolling.js" 
type="text/javascript"></script>
<script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js" 
type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
$(function(){
var $container = $('#content');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '#post',
});
});
$container.infinitescroll({
itemSelector : "#post",
navSelector : "div.pagination",
nextSelector : ".pagination a#next",
loadingImg : "",
loadingText : "<em></em>",
bufferPx : 10000,
extraScrollPx: 12000,
},
// trigger Masonry as a callback
function( newElements ) {
  var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
// ]]>    
</script>

这是我从教程中获得的pxu代码：

<script>
$(document).ready(function(){
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '5px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
{block:IndexPage}
var $container = $('.content');
$container.masonry({ itemSelector: '.post' });
$container.imagesLoaded(function(){
$container.masonry();
$container.find('.entry').animate({ opacity: 1, zIndex: 1 });
});
{block:ifInfiniteScroll}
$container.infinitescroll({
itemSelector: '.post',
navSelector: '.pagination',
nextSelector: '.next',
loadingImg: '',
loadingText: '<em></em>',
bufferPx: 2000
},
function( newElements ) {
var $newElems = $( newElements );
$newElems.find('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '1px',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
},
function(){
$container.masonry();
});
$newElems.imagesLoaded(function(){
$container.masonry( 'appended', $newElems );
$newElems.animate({ opacity: 1, zIndex: 1 });
});
});
$container.on( 'append.infiniteScroll', function( event, response, path, 
items ) {
$( '.photo-slideshow' ).pxuPhotoset();
});
$('#content').infinitescroll({
navSelector  : "div.navigation",            
nextSelector : "div.navigation a:first",    
itemSelector : "#content #post"          
},function(newElements){
$(newElements).find('.photo-slideshow').pxuPhotoset();}
});
{/block:ifInfiniteScroll}
{/block:IndexPage}});
</script>

我知道这些功能存在冗余，但是不幸的是，除非我将所有内容都包括在内，否则无限滚动将无法正常工作，我正尝试删除内容并将其重新添加进去，以查看造成该问题的原因，但我无法确定出来。就我所知，这可能是导致问题的原因

感谢大家提前阅读，我们将不胜感激。对于任何想要帮助的人，我非常抱歉，但现实是我真的很笨，所以请耐心等候

tumblr：扩展的照片集+无限滚动不会显示在新页面上吗？

0 个答案: