Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/zeshanshani/simple-load-more

This jQuery function will add a functionality to load 5 (or custom) more items. No AJAX functionality.
https://github.com/zeshanshani/simple-load-more

jquery jquery-plugin load-more

Last synced: 2 months ago
JSON representation

This jQuery function will add a functionality to load 5 (or custom) more items. No AJAX functionality.

Awesome Lists containing this project

README 

        
# Simple Load More

This jQuery plugin will add a functionality to load 5 (or custom) more items. Best for lists that are long and you want to hide all except first 5 (or custom) and then show a "Load More" button. When that button is clicked, it loads another 5 items.



*Note: this is not AJAX based. It just hides all the items except the first 5 (or custom) and shows another 5 when button is clicked.*



View Demo



## Downlaod



### Via NPM



Download this plugin using this NPM commend.



```

npm i simple-load-more

```



### Regular



Simply close this repository or download it as zip. After that, include the `jquery.simpleLoadMore.js` file in the head or footer of your HTML page.



``` HTML



```



You can also use the minified version, which is: `jquery.simpleLoadMore.min.js`



## Usage



``` JS

$('.some-element').simpleLoadMore({

  item: '.element-item',

  count: 5,

  // itemsToLoad: 10,

  // btnHTML: 'View More '

});

```



## Options



| Option | Type | Default | Description |

| ------ | ---- | ------- | ----------- |

| item | string (jQuery Selector) | null | Set the class of the actual items this plugin should take in count. |

| count | integer | 5 | Set the number of items to show at first and load after the button is clicked (if `itemsToLoad` is not set) |

| itemsToLoad | integer | value of `count` | set the number of items to load. Set to -1 to load all at once. |

| btnHTML | string (html) | `View More ` | Set a custom button here. |

| btnText | string | `View More` | Set button's custom text here. Use placeholders `{showing}` and `{total}` for showing items counter. Where `{showing}` shows the current number of items displaying and `{total}` shows the total items one instance has. |

| cssClass | string | `load-more` | Set the custom CSS class for the instance. Do not include dot in the class name, e.g., `new-class`  |

| showCounter | boolean | false | Shows the counter in a separate tag. By default enabling this option will show a text `Showing X out of X` before the load more button. View Demo for the example. |

| counterText | string | `Showing {showing} out of {total}` | Set custom counter text here. Use placeholders `{showing}` and `{total}` in the text. Where `{showing}` shows the current number of items displaying and `{total}` shows the total items one instance has. |

| btnWrapper | string (html) \\| boolean | `
` | Wrap custom HTML tag around the 'Load More' button. Or set this to `false` to completely remove the wrapper |

| btnWrapperClass | string | null | Add a custom CSS class to the button wrapper. |

| easing | string | `fade` | This property determines how the items should load when the button is clicked. You can set it to `fade` or `slide`. |

| easingDuration | string | `400` | Defines how long it should take to load next items. The value is in milliseconds. |

| `onLoad` | callback function | `function() {}` | Read more under "Events" section below. |

| `onNextLoad` | callback function | `function() {}` | Read more under "Events" section below. |

| `onComplete` | callback function | `function() {}` | Read more under "Events" section below. |



## Events



With the version 1.6.0, we are introducing callbacks. You can use these callback functions to perform some extra actions during the lifecycle of SLM (SimpleLoadMore) instance.



| Event | Params | Description |

| ------ | ---- | ----------- |

| `onLoad` | `$items`, `$btn` | This event fires on first time the SLM instance is fully initialized. Parameter `$items` refer to the all the items in the instance. `$btn` refers to the load more button element. `this` directs to the main SLM element. You can use it to target sub elements. |

| `onNextLoad` | `$items`, `$btn` | This event fires everytime next batch of items are loaded. Parameter `$items` refer to the all the items in the instance. `$btn` refers to the load more button element. `this` directs to the main SLM element. You can use it to target sub elements. |

| `onComplete` | `this` | This event fires when all the items have been loaded. `this` directs to the main SLM element. You can use it to target sub elements. |



Using the callback function is very simple. Here's an example:



```JS

$('.callback-onload').simpleLoadMore({

  item: 'div',

  count: 5,

  onLoad: function($items, $btn) {

    // Perform actions here.

  },

  onNextLoad: function($items, $btn) {

    // Perform actions here.

  },

  onComplete: function() {

    // Perform actions here.

  },

});

```



Check out the demo for callbacks to see it in action: https://zeshanshani.github.io/simple-load-more/demos/demo.html#callbacks



## Changelog



#### 1.6.0



- Feature: Introducing Callbacks 🎉

- Callback: `onLoad` fires when instance is fully loaded

- Callback: `onNextLoad` fires every time next batch of items are laoded

- Callback: `onComplete` fires when all items are loaded



#### 1.5.3



- Bugfix: typo in variable declaration of using ; instead of ,

- Bugfix: incorrect counter fix so when count is greater than total items length, then show items length instead.



#### 1.5.2



- Improvement: remove button wrapper as well when all items have been loaded.



#### 1.5.0



- Feature: ability to set a custom button wrapper and wrapper class

- Feature: ability to change easing to 'slide'. Default is 'fade'