Click to Load More Entries / Vertical Pagination

Question

I am using ExpressionEngine 2.5.2 and would like to create, for lack of a better phrase, "vertical pagination" for my channel entries. This would be similar to infinite scrolling, but instead of more entries loading automatically, I would like the user to have to click a "more entries" link. Currently my homepage shows 6 blog posts, and when someone clicks "more entries," I'd like 6 more entries to show up below the 1st 6.

My reason for this is that I would like to user to always be able to reach my website's footer containing links no matter how far down the page they are, but also not have to have another page load like regular pagination does.

I have no clue where to even start with this, and I am not fluent with jquery. Is there a plugin that does this? Is there a tutorial I can check out? Thanks for the help.

Answer 1

Justin Long posted an article a while back about how to add infinite scrolling to paginated pages.

http://iamjustinlong.com/blog/single/implementing_infinite_scroll_in_your_expressionengine_site/

Near the end he explains how to add the extra entries when clicking a link, as opposed to just scrolling.

Answer 2

You can do this with jQuery's .load().

If you have an ExpressionEngine template/URL for your blog that supports pagination, the output of which is just the HTML of the entries with no outer HTML/DOM, you're just loading chunks of HTML in per "page".

You could increment a counter each time the user clicks the link, and multiply that by your offset for your pagination offets.

click = 1;
pagination = click*10 = 10;
.load('/blog/more-entries/P'+pagination);
click++;

That would load the following URLs with each click:

/blog/more-entries/P10
/blog/more-entries/P20
/blog/more-entries/P30
...

Answer 3

Maybe you could use this: Infinite Scroll http://devot-ee.com/add-ons/infinite-scroll