Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Blog Module /

Discuss the Blog Module.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Infinite Scrolling using infinitescroll jquery plugin

Go to End

4 Posts   4169 Views


Community Member, 2 Posts

29 March 2012 at 10:45pm

I want to implement infinite scrolling in the BlogHolder, I've tried this using the Infinite-Scrolling jQuery plugin found at even though I follow the common instructions to setup the plugin, its not working at all. Can someone give an idea how to get it to work or give me a similar solution for Silverstripe that works(I have attached the Jquery plugin). Thank you

Attached Files

Community Member, 3 Posts

14 May 2012 at 10:48pm

I've forked infinite scroll myself in order to fix this, as we're having the same issue.

I've added an option called currPageIncrement in state, so that you can pass whatever number you need to make it work, the code is here:


Community Member, 5 Posts

27 May 2013 at 11:11pm

Hi! Can someone help me with this? I'm getting a "Sorry, we couldn't parse your Next (Previous Posts…, and kindly ask for help at" error and don't know how to get it work.

I think a link to the SS site using this plugin will be enough, but if you like to examine the code, here it goes.

SS 3.0.5


// infinite scroll
	navSelector    : "#pagination",
	nextSelector   : "#pagination a#next",
	itemSelector   : "#content article.thumb",
	debug          : true,
	dataType       : 'html',
}, function(newElements){
	window.console && console.log('context: ',this);
	window.console && console.log('returned: ', newElements);


<section id="content" class="PortfolioHolder">
  <article class="thumb">Blah...</article>
  <article class="thumb">Blah...</article>
  <article class="thumb">Blah...</article>

  <section id="pagination">
  <a id="next" href="http://localhost:8888/hopa/portfolio/?start=4">Next</a>


Community Member, 5 Posts

29 May 2013 at 12:09am

Edited: 29/05/2013 12:11am


I have found another solution.
Infinite Ajax Scroll


	// infinite ajax scroll
		container : '#content.PortfolioHolder',
		item: 'article.thumb',
		pagination: '#pagination',
		next: '#pagination a#next',
		loader: '<img src="' + $('base').attr('href') + 'themes/hopa/img/loader.gif"/>',
		triggerPageThreshold: 2,
		onRenderComplete: function(){ $(window).trigger('resize'); },
		history : false,