I didn’t find anything, so I took a crack at creating it myself. This is the result.
How to Use It
Before coding I sat down and tried to figure out how this beast would work.
Because it was unobtrusive, it should work on standard links, replacing them with an AJAX-y alternative if they have appropriate attributes. I hit on a link that looked like this:
1 2 3
If the link has
data-container attributes, it’s supposed to be an AJAX more button. The selector tells the script what to look for in the new page; the container tells it where to append the newly found elements. With this use case in hand, I proceeded to coding.
I apologize in advance if there’s a cleaner way to do this. My CoffeeScript is pretty weak.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
This should be pretty straightforward: we find the URL of the next page from the href of the link itself, and also the container we’re adding elements to and the selector. We make an AJAX request for the new page and parse it for the selector, appending each result to the container and fading them in once all the images have loaded. Afterwards, we update the URL to request the next new page of content if someone clicks on the “More” button again – or we disable the “More” button if we found no content.
Overall pretty simple but I was satisfied with this solution. Oh, and there’s a line there for integration into the really excellent jQuery Masonry script, if you include a data-masonry attribute on your link element.