This time I will share jQuery Plugin and tutorial about Load More Content With A Single Button – jQuery btnloadmore.js, hope it will help you in programming stack.
btnloadmore.js is a user-friendly and super tiny content loading plugin that by clicking a Load More button your users can load and append more content to current content blocks.
It is committed to providing a great pagination experience for large content blocks (like post lists, product cards, search results, etc) that enable your audience to load more content as needed.
How to use it:
1. Load the btnloadmore.js script from the dist folder.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/dist/btnloadmore.js"></script> |
2. Wrap your content in DIV element as follows:
01 |
<div class="contents"> |
02 |
<div class="item">1</div> |
03 |
<div class="item">2</div> |
04 |
<div class="item">3</div> |
05 |
<div class="item">4</div> |
06 |
<div class="item">5</div> |
07 |
<div class="item">6</div> |
08 |
<div class="item">7</div> |
09 |
<div class="item">8</div> |
10 |
<div class="item">9</div> |
3. Call the plugin on the top container and determine how many items to display on page load (default: 6).
1 |
$('.contents').btnLoadmore({ |
4. Determine how many items to load when clicking on the Load More button. Default: 3.
1 |
$('.contents').btnLoadmore({ |
5. Customize the label for the load more button. Default: ‘Loadmore …’.
1 |
$('.contents').btnLoadmore({ |
6. Apply additional CSS class(es) to the load more button. Default: ”.
1 |
$('.contents').btnLoadmore({ |
2 |
classBtn : 'btn btn-primary' |
7. Customize the animation speed. Default: 2000ms.
1 |
$('.contents').btnLoadmore({ |
