isotopo e scorrimento infinito con attivazione manuale

Question

Uso il plug-in Isotope con il plugin Infinite Scroll. Con le impostazioni predefinite Infinite Scroll attiva automaticamente il caricamento di nuovi elementi che va bene, tuttavia, preferirei avere un pulsante "Carica più immagini".

Manca solo una piccola parte di codice che otterrà nuovi elementi dallo scorrimento Infinito che posso passare alla funzione INSERISCONO isotopi. Si prega di vedere i miei commenti qui sotto in codice:

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

Il plugin di scorrimento infinito in realtà offre una "manual-trigger"-behavior di fare proprio quello che stai cercando.

Includere manual-trigger.js dopo jquery.infinitescroll.js, dicono scroll infinito di utilizzare il comportamento passando behavior: 'twitter' quando si chiama il plugin, quindi basta chiamare Isotope come un callback come dimostrato 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)); 
    } 
);