Turn your paginated pages into infinite scrolling pages with ease.
Version 0.1.3
Requires jQuery 1.4 or newer.
Licensed under:
MIT License – http://www.opensource.org/licenses/mit-license.php
- jQuery 1.4+
- A fully working (server-side) pagination with a ‘goto the next page’ link
IAS is based on the assumption that you, as a developer, already have taken care for the pagination using a server-side script. What IAS does is loading the next page via AJAX and inserting each individual item into the current page.
To install Infinite Ajax Scroll make sure you have jQuery 1.4+ installed. Next, add jquery.ias.min.js to the head of your webpage.
<script type="text/javascript" src="jquery.ias.min.js"></script>
Now place the loader image in you image folder and add the CSS to you existing stylesheets.
jQuery.ias({
container : ".listing",
item: ".post",
pagination: "#content .navigation",
next: ".next-posts a",
loader: "images/loader.gif"
});
You can use IAS multiple times within a single webpage. For example, you can have an IAS definition for paginating blogposts and one for comments.
Default: “#container”
Enter the selector of the element containing your items that you want to paginate.
Default: “.item”
Enter the selector of the element that each item has. Make sure the elements are inside the container element.
Default: “#pagination”
Enter the selector of the element that contains your regular pagination links, like next, previous and the page numbers. This element will be hidden when IAS loads.
Default: “.next”
Enter the selector of the link element that links to the next page. The href attribute of this element will be used to get the items from the next page. Make sure there is only one(1) element that matches the selector.
Default: “images/loader.gif”
Enter the url to the loader image. This image will be displayed when the next page with items is loaded via AJAX.
Default: empty function
Event handler. Is called each time the user scrolls to an other page.
Parameters:
param | description |
pageNum | Current page number |
pageUrl | Url of the current page |
scrollOffset | scroll offset for this page |
Example:
onPageChange: function(pageNum, pageUrl, scrollOffset) { console.log('Welcome on page ' + pageNum); }
Default: empty function
Event handler. Is called each time new items are loaded.
Parameters:
param | description |
items | array containing the item elements |
Return value:
When we return false in the callback, we prevent IAS from automatically insert the loaded items. This can be used to manually insert the items.
Example:
onLoadItems: function(items) { console.log('We loaded ' + items.length + ' items'); }
You can integrate Google Analytics by using the onPageChange event. Here is an example:
jQuery.ias({
container : ".listing",
item: ".post",
pagination: "#content .navigation",
next: ".next-posts a",
loader: "images/loader.gif",
onPageChange: function(pageNum, pageUrl, scrollOffset) {
// This will track a pageview every time the user
// scrolls up or down the screen to a different page.
path = jQuery('<a/>').attr('href',pageUrl)[0].pathname.replace(/^[^\/]/,'/');
_gaq.push(['_trackPageview', path]);
}
});
Example on how to integrate jQuery Masonry.
jQuery.ias({
container : ".listing",
item: ".post",
pagination: "#content .navigation",
next: ".next-posts a",
loader: "images/loader.gif",
onLoadItems: function(items) {
// hide new items while they are loading
var $newElems = $(items).show().css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$('.listing').masonry( 'appended', $newElems, true );
});
return true;
}
});
IAS inserts a div element with an image to generate a loader. The div has a class called ias_loader. Using this class you can adjust the styling of the loader.
You can also link to an other loader image. Use the loader option to link to the right image.
If you have any ideas or bugs, please submit them to the GitHub issue tracker at https://github.com/webcreate/Infinite-Ajax-Scroll. We rely on our users for ideas on improvements and bug reports.