isotope & Infinite Scroll with manual triggering

Question

I'm using Isotope plugin with Infinite Scroll plugin. With the default settings Infinite Scroll automatically triggers loading new elements which is fine, however, I would rather have a button "Load more images".

I'm only missing a small piece of code that will get new elements from Infinite scroll that I can pass to isotope INSERT function. Please see my comments below in code:

// initialize infinite scroll
$container.infinitescroll({
    navSelector  : '#paging',    // selector for the paged navigation 
    nextSelector : '#paging a',  // selector for the NEXT link (to page 2)
    itemSelector : '.col',     // selector for all items you'll retrieve
    loading: {
        msgText: 'Loading...',
        finishedMsg: Loaded all!',
             }
    } // <-- NOTE that we do not use callback function here!
    );


$(window).unbind('.infscr'); 

$('#paging a').click(function(){

// NEED CODE HERE TO GET NEW ELEMENTS FROM INFINITE SCROLL AND PASS THOSE ELEMENTS TO $container.isotope('insert', $(newElements)); 

}); 

Answer 1

The infinite scroll plugin actually offers a "manual-trigger"-behavior to do just what you're after.

Include manual-trigger.js after jquery.infinitescroll.js, tell infinite scroll to use the behavior by passing behavior: 'twitter' when calling the plugin, then just call Isotope as a callback as demonstrated in Isotope's demo for Infinite Scroll:

$container.infinitescroll({
  navSelector  : '#paging',
  nextSelector : '#paging a',
  itemSelector : '.col',
  behavior: 'twitter',
  loading: {
      msgText: 'Loading...',
      finishedMsg: 'Loaded all!'
    }
  },
  // call Isotope as a callback
  function( newElements ) {
    $container.isotope( 'appended', $( newElements ) ); 
  }
);