Isotop & Infinite Scroll mit manueller Triggerung

Question

Ich benutze Isotope Plugin mit Infinite Scroll Plugin. Mit den Standardeinstellungen löst Infinite Scroll automatisch das Laden neuer Elemente aus, was in Ordnung ist. Ich hätte jedoch lieber eine Schaltfläche "Mehr Bilder laden".

Ich vermisse nur ein kleines Stück Code, der neue Elemente von Infinite scroll bekommen wird, die ich Isotop INSERT-Funktion übergeben kann. Bitte beachten Sie meine Kommentare unten 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

Die unendliche Scroll-Plugin eigentlich ein "manual-trigger"-behavior bietet genau das zu tun, was Sie wollen.

Fügen manual-trigger.js nach jquery.infinitescroll.js, unendlichem Scroll sagen, das Verhalten zu verwenden, indem behavior: 'twitter' vorbei, wenn die Plugin aufrufen, dann rufen Sie einfach Isotopen als Rückruf wie in Isotope's demo for Infinite Scroll demonstriert:

$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)); 
    } 
);