Ok, I managed to finally get this to work, after hours of playing around.

Anyone who wants to achieve this, this is the code:

1. Download the Infinite Scroll EE script from here http://www.mediafire.com/?a789yvlg8h5it64 (credit to Paul Irish for the infinite-scroll plug-in).

2. Add the script to your footer, just before the body tag close. This is my script:

$(document).ready(function(){
     $('#content').infinitescroll({
          navSelector : ".navigation",
          nextSelector : "a.next",
          itemSelector : ".post",
     })     
});

3. Change the selectors to match with your set-up.
4. Add the pagination html, mine is:

{paginate}
   <div class="navigation">
    <span></span> 
          {if next_page}<a href="http://{auto_path}class=next">Next Page</a>{/if}
         </div>
      {/paginate}

5. Your post should be wrapped in the following:

{exp:channel:entries channel="blog" limit="3" dynamic="on"}
...post html
...pagination code
{/exp:channel:entries}

TA DA! That should work showing 3 entries at a time. If you want to display more than 3 entries, you have to amend some of the code inside the infinitescroll-ee.js file. You need to edit the following:

LINES 25 - 35 (Change all of the 3’s to the amount of entries per page you want)

if (path.match(/^(.*?)\b3\b(.*?$)/)) {
                path = path.match(/^(.*?)\b3\b(.*?$)/).slice(1)
            } else {
                if (path.match(/^(.*?)3(.*?$)/)) {
                    if (path.match(/^(.*?page=)3(\/.*|$)/)) {
                        path = path.match(/^(.*?page=)3(\/.*|$)/).slice(1);
                        return path
                        
                    }
                    debug("Trying backup next selector parse technique. Treacherous waters here, matey.");
                    path = path.match(/^(.*?)3(.*?$)/).slice(1)

LINE 100 (Change the 3 to the amount of entries per page you want)

opts.currPage+=3;

Hope this helps people, took me 4 hours just to finally get it to work!

This script won’t work with the latest version of jQuery, for reasons i’m not sure, I had to go way back to 1.4.3 just to get it to work. Possibly someone else can enlighten us as to why??

Hi Jay24888!

Thanks for sharing your solution!

I’m going to move this into the Development and Programming Forum so others can share their ideas and solutions as well.

Thanks!

Thanks Jay24888 for this great tutorial. Much appreciated and easy to understand.

Quick tip for others:

content is your global container

.post is your entry wrapper

In other words(code)…

<div id="content">

   {exp:channel:entries channel="blog" limit="3" dynamic="on"}

      <div class="post">
         ...post html
         ...pagination code
      </div>

      {paginate}
         <div class="navigation">
             <span></span> 
             {if next_page}<a href="http://{auto_path}class=next">Next Page</a>{/if}
         </div>
      {/paginate}  

   {/exp:channel:entries}

</div>

I’ve been looking at infinitescroll and planned to implement it in a future project. Thanks for your solution, it will save me some time!

I found a fork of Paul Irish’s updated script from DeadCat at https://github.com/DeadCat/infinite-scroll/blob/master/jquery.infinitescroll.js that work as an alternative for this issue – the fork includes a new parameter called “extractLink” which if you set to true will find append the correct page content (extractLink: true,).

Note, this will allow you to use a current version of jQuery.