Table of Contents
B) Installation – top
- Download plugin’s Zip file from codecanyon.net
- Extract zip file in your local directory.
- Login to your WP Admin and Go To Plugins -> Add New -> Upload.
- Browse zip file animated-infinite-scroll.zip from your computer and click “Install Now”.
- Activate Plugin.
- In WP Admin Go To Settings -> Animated Infinite Scroll in main left navigation.
- Click Add New to add settings.
- You can add new settings for unlimited pages. That’s it.
Settings Screen
C) Quick Guide – top
Click on Add New button to add new settings.
Insert all required fields with proper jQuery Selector.
See Configuration Section to get information about all setting fields.
Below is lession for jQuery Selector.
How to find class & ID (jQuery Selector) of element? See Below Steps…
- Right click on element you want to get class or id and click on inspect element. (See below screen)
- You can see in below screen. Inspect Element window is open.
– Highlighted with red color is ID. You can use this id in jQuery selector field. For ID append hash(#) symbol to your id.
Ex: #primary or div#primary
– Highlighted with green color is class. You can use this class in jQuery selector field. For class append dot(.) symbol to your class.
Ex: .site-content or div.site-content
– You want to add multiple element in same row with comma separated.
Ex: #primary, .banner, img, .post, li.product etc…
D) Configuration – top
| Parameter | Description | Default | Possible Values |
|---|---|---|---|
| Status | If checked current setting’s status is enabled. Uncheck checkbox to disable this setting. | Checked | Checked | Unchecked |
| Title | This field is just for identification of setting and is not used for any purpose. | Blank | Any string. |
| Pagination Type | Select type of Pagination | Infinite Scroll | Infinite Scroll | Load More Button | Ajax Pagination |
| Infinite Scroll: Converts your pagination to infinite scroll. When a user scrolls towards the bottom of the page, the next page of posts is automatically retrieved and appended. | |||
| Load More Button: Replace default pagination with Load More Button. When a user click on Load More Button, the next page of posts is automatically retrieved and appended. | |||
| Ajax Pagination: No more page loading on pagination click. Add AJAX power to default pagination. | |||
| Content Selector | Div containing your posts | Blank | class or id of div which is containing your all posts |
| Navigation Selector | Div containing your posts navigation (pagination) | Blank | class or id of div which is containing your default navigation (pagination) |
| Next Selector | Link to next page of content (Next page link selector) | Blank | class or id of next button link of default navigation (pagination) |
| Unique Body Class | (Optional) Unique body class to make this setting unique | Blank | Add page unique body class to make all settings unique than other settings. Which will prevent conflict with other settings. |
| Item Selector | Div containing an individual post | Blank | Div or any HTML element which is containing an individual post |
| Buffer Pixels | Increase this number if you want infinite scroll to fire quicker. Higher number will prevent user to show loader. Check to scroll top after data loading. (only for: Infinite Scroll) | 50 | Any positive number. |
| Scroll Top | If checked, page will be scroll to top after data loading (only for: Ajax Pagination) | 50 | Any positive number. |
| Scroll To | Scroll top destination. Afer loading data set scroll top destination. Only works if scroll top is enable. (only for: Ajax Pagination) | html, body | Any jquery selector |
| Loading Message | Text to display when posts are retrieving | Loading… | Any string |
| Loading Wrapper Class | Add custom class to customize loading message style | Blank | CSS class to customize loading message style. Use space for multiple classes. |
| Finished Message | Text to display when no additional posts are available. | No more posts available… | Any string |
| Loading Image | Loader image to display when posts are retrieving. | Circular Loader | Any Image URL |
| Load More Button Text | Add Load More Button Text | Load More | Any string |
| Load More Button Class | Add custom class to customize button style (Use space for multiple) | blank | CSS class to customize button style. Use space for multiple classes. |
| Animation | Animation style after loading post. | fadeIn | 130 animation availble. |
| On Pagination Start | Executes on pagination start. | Blank | Use Javasctipt/jQuery code to trigger custom event on pagination start. |
| On Pagination End | Executes immediately after pagination completed. | Blank | Use Javasctipt/jQuery code to trigger custom event after pagination completed. |
F) Version History – top
24-November-2014 – version 1.0
- Initial Version