Is there an infinite scroll plugin with a load more button? [closed]

Question

Where can I get the infinite scroll plugin that has a button you click before it loads in more posts?

Here is what I'm looking for (look at the more button in the lower right corner)

Answer 1

From the documentation page of jQuery infinite scroll plugin:

In 1.4 you can trigger the loading of the next page of content at will. You’ll first unbind the default behavior. And then trigger the next pull whenever you like.

// unbind normal behavior. needs to occur after normal infinite scroll setup.
$(window).unbind('.infscr');
// call this whenever you want to retrieve the next page of content
// likely this would go in a click handler of some sort
$(document).trigger('retrieve.infscr');

It should solve your problem.

Answer 2

With current version of Infinite Scroll Plugin (2.1.0), you can just pause when the elements are loaded, and then resume and check if new content should be loaded on a button click (or anything else):

$('.container').infinitescroll({
        // infinite scroll options
    },
    function(){
        // pause when new elements are loaded
        $('.container').infinitescroll('pause')
    }
);

function resume_infinite_scroll(){
    // resume
    $('.container').infinitescroll('resume')
    // check if new elements should be loaded
    $('.container').infinitescroll('scroll')
}

and then

<button onclick="resume_infinite_scroll()">load more</button>

Answer 3

If you are looking for an infinite scroll, that's one thing, but just a More button shouldn't require a plugin.

HTML

<div id="items">
    <!-- Run your query using the page parameter to offset items, then display the items here -->
</div>
<button id="more">More</button>

JS

var page = 0;
$('#more').click(function(){
    page++;
    $('<div/>').appendTo('#items').load('the/same/url/?page='+page+' #items');
});

The .load function will make an AJAX call to the URL provided and the optional selector will just pull out that particular matched item. In this case if the ?page parameter to your display page controls the offset to the query to pull the items you want then .loading the URL will append the next set of items every time it is called.

Of course you could make a unique AJAX page that just returns the HTML fragments for the next set of items but it is a little bit more involved depending on your architecture. You will save bandwidth/execution time by doing it, however.