This time I will share jQuery Plugin and tutorial about Easy jQuery AJAX Infinite Scroll Plugin – Yofinity, hope it will help you in programming stack.
| File Size: | 72.5 KB |
|---|---|
| Views Total: | 8698 |
| 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.
1 |
<script src="//code.jquery.com/jquery-1.12.1.min.js"></script> |
2 |
<script src="yofinity.js"></script> |
2. Add a load more link at the end of the content area:
1 |
<a href="page2.html" title="More Content" rel="next">Loading...</a> |
3. Active the infinite scroll plugin.
1 |
$('body').yofinity({ |
2 |
success: function ($link, response){ |
3 |
$link.before(response); |
4 |
$link.attr('href', 'page2.html'); |
5 |
} |
6 |
}); |
4. Plugin’s default settings.
01 |
$('body').yofinity({ |
02 |
03 |
// Ajax custom URL to specify if no next button is available (Usefull for WordPress sites with ajax call functions) |
04 |
ajaxUrl: '', |
05 |
06 |
// Number of pixels to fire infinite scroll |
07 |
buffer: 1000, |
08 |
09 |
// container |
10 |
context: window, |
11 |
12 |
// debug mode |
13 |
debug: false, |
14 |
15 |
// Function called if script fires an error |
16 |
error: null, |
17 |
18 |
// Function called when script fires loading |
19 |
loading: null, |
20 |
21 |
// Iterator may be used for pagination, define where to start. |
22 |
// After each success call, the iterator is autoincremented |
23 |
iterator: 1, |
24 |
25 |
// Load more selector |
26 |
navSelector: 'a[rel="next"]', |
27 |
28 |
// Method to send data with |
29 |
type: 'get', |
30 |
|
31 |
// Parameters to send in POST or GET method |
32 |
params: {}, |
33 |
34 |
// Function called when script fires success |
35 |
success: null |
36 |
|
37 |
}); |
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.
source : jqueryscript.net
