I've got a ton of problems surrounding the combination of Masonry and infinite scrolling in Wordpress, namely on this page.
I gather getting Masonry to work with infinite scrolling requires a callback within the infinite scroll jQuery code - this seems to be well-established. However, I can only seem to get infinite scrolling working on my Wordpress site under very specific circumstances, and given those circumstances I'm not sure how to integrate Masonry.
This code is borrowed from the Masonry.js website's infinite scroll demonstration and is in the footer right now:
<script>
$(function(){
var $container = $('.et_pb_blog_grid_wrapper');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.post',
columnWidth: 100
});
});
$container.infinitescroll({
navSelector : '#nextposts', // selector for the paged navigation
nextSelector : '#nextposts a', // selector for the NEXT link (to page 2)
itemSelector : '.post', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://dearjackalope.com/juliaproblems/wp-content/themes/juliamariani/images/ajax-loader.gif'
}
},
// 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
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>
The problem is, even though it works in static HTML, on this page it doesn't have any effect and I have no idea why! What does work is this:
<script>
var infinite_scroll = {
loading: {
img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
},
"nextSelector":"#nextposts a",
"navSelector":"#nextposts",
"itemSelector":".post",
"contentSelector":".et_pb_blog_grid_wrapper"
};
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
</script>
But I'm not sure how to add the Masonry callback to this - the way the variables are declared in the callback looks quite different from this (I know that the dollar sign is defined in jQuery and it appears in the callback but not in the original code - I'm not sure if this matters?), and I'm not sure exactly where in the function it needs to go. I've tried:
<script>
var infinite_scroll = {
loading: {
img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
},
"nextSelector":"#nextposts a",
"navSelector":"#nextposts",
"itemSelector":"article.post",
"contentSelector":".et_pb_blog_grid_wrapper"
},
// hide new items while they are loading
var $newElems = jQuery(newElements).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
};
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
</script>
and this, declaring a new function:
<script>
var infinite_scroll = {
loading: {
img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
},
"nextSelector":"#nextposts a",
"navSelector":"#nextposts",
"itemSelector":"article.post",
"contentSelector":".et_pb_blog_grid_wrapper"
});
};
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
function newElements() // hide new items while they are loading
var $newElems = jQuery(newElements).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
</script>
Neither of these work, so I'm not sure where I'm supposed to be putting the callback, or if there's something about the original code that means the callback won't work. I've spent about eight hours reading through Javascript tutorials and documentation and I'm not sure what to try next. :(
There is a now-unsupported, but still seemingly widely-used, plugin called Infinite-Scroll which includes a checkbox for 'Masonry Mode', but when I tried installing it I got nothing - it didn't appear to load any code into the page at all, so that doesn't appear to be an option here. It's possibly worth noting that I also found the Jetpack infinite scroll feature loaded no code into the page whatsoever even after fully setting up the theme for it, so I seem to be limited to non-plugin code here.
Is there something fundamentally wrong with my theme that's causing all these problems? My Javascript is beginner-level at best and I'm really struggling to know where to go from here - any help would be much appreciated.
