1

I'm using the infinite scroll plugin in a tumblr blog and everything works as it should, provided the user is in the front page- for example: "{someblog}.tumblr.com".

Starting from "{someblog}.tumblr.com/page/2" and so on, the plugin doesn't seem to load at all (it doesn't hide the navigation elements). initialize Here's the code I use to call it:

$('#container').infinitescroll({
loading: {
            finished: undefined,
            finishedMsg: "Finished",
            img: "preloader.gif",
            msg: null,
            msgText: "Loading...",
            selector: null,
            speed: 'fast',
            start: undefined
        },
         state: {
            isDuringAjax: false,
            isInvalidPage: false,
            isDestroyed: false,
            isDone: false, // For when it goes all the way through the archive.
            isPaused: false,
            currPage: 1
         },
        callback: undefined,
        debug: false,
        behavior: undefined,
        binder: $(window), // used to cache the selector
        nextSelector: "#next a",
        navSelector: ".navigation",
        contentSelector: "#container", // rename to pageFragment
        itemSelector: "div.post",
        animate: false,
        pathParse: undefined,
        dataType: 'html',
        appendCallback: true,
        bufferPx: 400
    },
...

edit: I enabled debug information and I got the following info:

({0:"Sorry, we couldn't parse your Next (Previous Posts) URL. Verify your the css selector points to the correct A tag. If you still get this error: yell, scream, and kindly ask for help at infinite-scroll.com."})

({0:"determinePath", 1:"/page/4"})

({0:"Binding", 1:"bind"}

It seems that it does find the address to the next page-"/page/4" (since I was on page 3). But it can't "parse" it for some reason?

Is it possible that the plugin can only function on page one, where the link to next page contains a "2"? If so, how can I override it?

Thanks a lot in advance!

Community
  • 1
  • 1
bjnvnen
  • 181
  • 1
  • 6
  • 1
    I think it's because you're on /page/2 and not the root. Which is why it's having trouble figuring out the 'path'. Adding something like this gets you closer: `debug: true, pathParse: function() { ["http://your-site.tumblr.com/page", ""] }` – graygilmore Aug 22 '12 at 03:07
  • Thanks, it does get me closer! But when adding this I get an error: "TypeError: path is undefined", which traces to this line: `path = opts.path,` and as far as I can tell, it stays undefined regardless of what I specify in the options when initializing the plugin. Why is that happening? – bjnvnen Aug 23 '12 at 16:05

1 Answers1

1

Thanks to @graygilmore I figured it out. This is the line that needs to be added to the code:

pathParse: function() {
    return ['http://{Name}.tumblr.com/page/', '']
},

Note that {Name} is a Tumblr variable and needs not be changed- Tumblr replaces it automatically.

Additionally- this line should be added in the state: {...} block:

currPage: {CurrentPage}

(Where as in the example in my question above I simply set it to "1").

{CurrentPage} is a Tumblr variable as well, so it's being replaced automatically with the current page number, for every page being viewed.

Now Infinite-Scroll loads properly on every page of the blog, which is especially useful when wanting to create a "load more posts" button, which gives the user a choice between regular (paged) navigation and infinite-scrolling.

bjnvnen
  • 181
  • 1
  • 6