article:
Website: Creative Website
article:
Elements Design: Retina Finder Window

Plugin: Infinite Ajax Scroll

Advertisement

Turn your paginated pages into infinite scrolling pages with ease.

Plugin: Infinite Ajax Scroll


Usage


<script type="text/javascript" src="jquery.ias.min.js"></script>


basic usage

jQuery.ias({
  container : '.listing',
  item: '.post',
  pagination: '#content .navigation',
  next: '.next-posts a',
  loader: '<img src="images/loader.gif"/>'
});

Integrating with Google Analytics

jQuery.ias({
    container : '.listing',
    item: '.post',
    pagination: '#content .navigation',
    next: '.next-posts a',
    loader: '<img src="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]);
    }
});



Integrating with jQuery Masonry

jQuery.ias({
    container : '.listing',
    item: '.post',
    pagination: '#content .navigation',
    next: '.next-posts a',
    loader: '<img src="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;
    }
});

Some Options

jQuery.ias({
  container   : ".listing",
      // Enter the selector of the element containing
      // your items that you want to paginate.
 
  item    : ".post",
    // Enter the selector of the element that each
    // item has. Make sure the elements are inside
    // the container element.
 
  pagination  : "#content .navigation",
    // 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.
 
  next    : ".next-posts a",
    // 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.
 
  loader  : "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.
});




source
demo
github
download

Advertisement
Tags: plugin, inifinite, scroll, ajax, jquery, develop, web, css, internet, html, json

Leave a Comment

No Comment

© Creative3x Ltd.