Skip to content

Instantly share code, notes, and snippets.

@arielsalminen
Created May 8, 2012 10:08
Show Gist options
  • Save arielsalminen/2634019 to your computer and use it in GitHub Desktop.
Save arielsalminen/2634019 to your computer and use it in GitHub Desktop.
Custom endless pagination for isotope (supports query strings in url and updates the page count after each load)
jQuery(function () {
var $feed = $(".feed"),
$trigger = $(".next_page"),
$spinner = $(".spinner"),
spinner = "<div class=\"spinner\"></div>";
var isotopeSettings = {
itemSelector: ".box"
}
$trigger.on("click", function (e) {
e.preventDefault();
var $this = $(this),
originalURL = $(this).attr("href");
// Get url variables and return an object
function getUrlVars() {
var vars = {}, hash;
var hashes = originalURL.slice(originalURL.indexOf("?") + 1).split("&");
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split("=");
vars[hash[0]] = hash[1];
}
return vars;
}
// Construct new url
function newURL() {
var urlVars = getUrlVars();
urlVars["page"] = parseInt(urlVars["page"]) + 1;
var newParams = $.map(urlVars, function(value, key) {
return key + "=" + value;
}).join("&");
return originalURL.substring(0, originalURL.lastIndexOf("?")) + "?" + newParams;
}
// load all post divs from page 2 into an off-DOM div
$("<div/>").load(originalURL + ".box", function () {
var $temp = $(this),
newElements = $temp.contents();
// Show spinner
$this.hide().after(spinner);
if (newElements.length !== 0) {
// Wait a bit so that the images load
// (this is here just to demonstrate the loading, not a real fix)
setTimeout(function () {
// once they're loaded append to content area
$(newElements)
.appendTo($feed)
.hide();
// Change href & relayout new items
$this.attr("href", newURL());
$feed.isotope("appended", $(newElements), function () {
$(newElements).fadeIn();
});
// Hide spinner & Fade in load more button
$spinner.fadeOut().remove();
$this.fadeIn();
}, 600);
} else {
// In case there no more content to load:
$this.replaceWith("<span>You've reached the end of the web.</span>");
$spinner.fadeOut().remove();
$this.fadeIn();
}
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment