Masonry Callback In Jquery Infinite Scroll Isn't Working In Wordpress - And Neither Are Infinite Scroll Plugins

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

Solution 1:

OK, so it looks like this whole issue stemmed from the fact that Wordpress doesn't understand $ as a jQuery variable since its default enqueued version of jQuery runs in no-conflict mode.

Replacing all the '$' signs with 'jQuery' solves the problem, or you can wrap it in a function and map it to $ like this which is what I did - http://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

Not sure how I missed this, but if anyone else is having difficulty getting infinite scrolling working in Wordpress, it worked like a charm after hours of puzzling over why it wasn't working!

Solution 2:

In case this helps someone else, I got stuck by trying to add the function into the infinite_scroll js variable. Adding it like this worked fine:

var infinite_scroll = {
    loading: {
        img: "<?phpecho get_template_directory_uri(); ?>/library/images/ajax-loader.gif",
        msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
        finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
    },
    "nextSelector":".pagination .next",
    "navSelector":".pagination",
    "itemSelector":".infinite-scroll-post",
    "contentSelector":"#infinite-scrollable",
    "debug":true
}
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll,function(arrayOfNewElems){
    picturefill({ reevaluate: true });
} );