isótopo y Desplazamiento infinito con activación manual

Question

Estoy usando el complemento Isotope con el plugin Infinite Scroll. Con la configuración predeterminada Infinite Scroll activa automáticamente la carga de nuevos elementos, lo que está bien, sin embargo, prefiero tener un botón "Cargar más imágenes".

Solo me falta un pequeño fragmento de código que obtendrá nuevos elementos del scroll Infinite que puedo pasar a la función INSERT del isótopo. Por favor vea mis comentarios a continuación en el código:

// 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

El plug-in de desplazamiento infinita realidad ofrece una "manual-trigger"-behavior para hacer precisamente lo que está buscando.

Incluir manual-trigger.js después jquery.infinitescroll.js, dicen desplazamiento infinito para utilizar el comportamiento al pasar behavior: 'twitter' al llamar el plugin, entonces simplemente llamar isótopos como llamada de retorno como se demuestra en 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)); 
    } 
);