Easy jQuery AJAX Infinite Scroll Plugin - Yofinity

Easy jQuery AJAX Infinite Scroll Plugin - Yofinity
File Size: 72.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Yet another jQuery infinite scroll plugin that simply fetches and appends more content to the end of the content area when user scrolls down the webpage.

How to use it:

1. Include the necessary jQuery library and the jQuery Yofinity plugin on the webpage.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="yofinity.js"></script>

2. Add a load more link at the end of the content area:

<a href="page2.html" title="More Content" rel="next">Loading...</a>

3. Active the infinite scroll plugin.

$('body').yofinity({
  success: function ($link, response){
    $link.before(response);
    $link.attr('href', 'page2.html');
  }
});

4. Plugin's default settings.

$('body').yofinity({

  // Ajax custom URL to specify if no next button is available (Usefull for WordPress sites with ajax call functions)
  ajaxUrl: '',

  // Number of pixels to fire infinite scroll
  buffer: 1000,

  // container
  context: window,

  // debug mode
  debug: false,

  // Function called if script fires an error
  error: null,

  // Function called when script fires loading
  loading: null,

  // Iterator may be used for pagination, define where to start. 
  // After each success call, the iterator is autoincremented
  iterator: 1,

  // Load more selector
  navSelector: 'a[rel="next"]',

  // Method to send data with
  type: 'get',
  
  // Parameters to send in POST or GET method
  params: {},

  // Function called when script fires success
  success: null
  
});

Change log:

2016-09-25

  • new version with ajax URL custom call, new usefull iterator, and params

This awesome jQuery plugin is developed by crewstyle. For more Advanced Usages, please check the demo page or visit the official website.