Question

I need to combine Expression Engine with http://www.infinite-scroll.com.

I have tried numerous ways of combining pagination with the jQuery plugin but cannot find a successful way of doing so.

I can get it to work (a little) by limiting my entries to 2, this enables the infinite scroll however for some reason once you hit page 2, the entries repeat? For example, I have 6 entries, once I scroll to the bottom, it loads the next two fine but when I scroll to the bottom of this page, it reloads the 4th entry, when I scroll to the bottom of the 3rd ‘page’ it reloads the 5th entry etc… so I have 2 of entry 4, 2 of entry 5 etc etc…

If I change the limit to 3 (which is how many I want), the infinite scroll won’t run at all, any ideas?

Has anyone successfully used Infinite Scroll with Expression Engine. It seems to work fine with EVERY other CMS system but expression engine.

Here is the link I’m trying to accomplish it on:

This is my code:

[removed][removed]
[removed]
 $('#content').infinitescroll({
  // callback  : function () { console.log('using opts.callback'); },
  navSelector   : "#content .navigation",
  nextSelector  : "#content a.next",
  itemSelector  : "#content .post",
  debug    : false,
  dataType   : 'html',
  // behavior  : 'twitter',
  // appendCallback : false, // USE FOR PREPENDING
  // pathParse      : function( pathStr, nextPage ){ return pathStr.replace('2', nextPage ); }
    }, function(newElements){

     //USE FOR PREPENDING
     // $(newElements).css('background-color','#ffef00');
     // $(this).prepend(newElements);
     //
     //END OF PREPENDING

     window.console && console.log('context: ',this);
     window.console && console.log('returned: ', newElements);
    });
[removed] 

<div id="content">
   {exp:channel:entries channel="blog" limit="2" paginate="bottom"}
   <section class="post">
    <article>
     <h1>{title}</h1>
     <h2 class="margin">{entry_date format="%d %M, %Y"}</h2>
     {blog_copy}
     <ul class="social-icons">
      <li><span class="st_facebook_custom" st_title="INC Daily - {title}" st_url="{page_url}"><img src="/inc_daily/images/fb-icon.gif" alt=""/> </span></li>
      <li><span class="st_twitter_custom" st_title="INC Daily - {title}" st_url="{page_url}"><img src="/inc_daily/images/twitter-icon.gif" alt=""/> </span></li>
     </ul>
    </article>
    {exp:imgsizer:size src="{blog_image}" width="528" height="356"}
    <img src="{sized}" width="{width}" height="{height}" alt="" />
    {/exp:imgsizer:size}
   </section><!-- END POST -->
   {paginate}
   <div class="navigation">
    <span id="paginationtotal" title="{exp:stats channel='blog'}{total_entries}{/exp:stats}"></span> 
          {if next_page}<a class="next" href="{auto_path}">Next Page</a>{/if}
         </div>
      {/paginate}
   {/exp:channel:entries}
   </div>  

Answer 1

I had it working a while ago after modifying Paul Irish’s example. You can see what I did here:

https://github.com/imjared/projects/tree/master/ee_inf_scroll

Apologies for the lack of documentation and clarity, hope it’s helpful.