Skip to content

Commit 288d0f4

Browse files
update readme.
1 parent 4792270 commit 288d0f4

File tree

1 file changed

+42
-3
lines changed

1 file changed

+42
-3
lines changed

README.md

Lines changed: 42 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@ __Examples:__
88

99
- [Hemeon.com](http://hemeon.com/) by [Marc Hemeon](https://twitter.com/hemeon)
1010
- [Manik Rathee is a mobile photographer](http://www.manikrathee.com/is/a/mobile-photographer/) by [Manik Rathee](http://twitter.com/manikrathee)
11+
- [VinThomas.com](http://vinthomas.com/) by [Vin Thomas](https://twitter.com/vinthomas)
1112
- [The Kozik Cocoon](http://www.kozikcocoon.com/) by [Danny Palmer](http://twitter.com/dannyprose)
1213

14+
1315
__Buy me a coffee:__
1416

1517
If you enjoy using Instafeed.js and want to say thanks, you can leave me a small tip using [Gittip](https://www.gittip.com/stevenschobert).
@@ -67,8 +69,8 @@ The only thing you'll need to get going is a valid __client id__ from Instagram'
6769
- `random` - Random order.
6870
- `links` (bool) - Wrap the images with a link to the photo on Instagram.
6971
- `limit` (number) - Maximum number of Images to add. __Max of 60__.
70-
- `useHttp` (bool) - By default, image urls are protocol-relative (uses `//` prefix). Set to `true`
71-
to use plain old `http://`.
72+
- `useHttp` (bool) - By default, image urls are protocol-relative. Set to `true`
73+
to use the standard `http://`.
7274
- `resolution` (string) - Size of the images to get. Available options are:
7375
- `thumbnail` (default) - 150x150
7476
- `low_resolution` - 306x306
@@ -128,6 +130,42 @@ Notice the `{{link}}` and `{{image}}`? The templating option provides several ta
128130
- `{{location}}` - Name of the location associated with the image. Defaults to empty string if there isn't one.
129131
- `{{model}}` - Full JSON object of the image. If you want to get a property of the image that isn't listed above you access it using dot-notation. (ex: `{{model.filter}}` would get the filter used.)
130132

133+
## Pagination
134+
135+
As of __v1.3__, Instafeed.js has a `.next()` method you can call to load more images from Instagram.
136+
Under the hood, this uses the _pagination_ data from the API. Additionall, there is a helper
137+
`.hasNext()` method that you can use to check if there is pagination data.
138+
139+
Together these options can be used to create a "Load More" button:
140+
141+
```js
142+
function checkLoadMore() {
143+
// if there are no more results, disable the load more button
144+
if (!this.hasNext()) {
145+
loadButton.setAttribute('disabled', 'disabled');
146+
}
147+
};
148+
149+
function handleLoadClick() {
150+
// load more!
151+
feed.next();
152+
};
153+
154+
// create our Instafeed instance
155+
var feed = new Instafeed({
156+
success: checkLoadMore
157+
});
158+
159+
// grab out load more button
160+
var loadButton = document.getElementById('#load-more');
161+
162+
// bind out click event
163+
loadButton.addEventListener('click', handleLoadClick);
164+
165+
// run our feed!
166+
feed.run();
167+
```
168+
131169
## Security Considerations
132170

133171
With Instafeed, it is possible to get images from a specific user id:
@@ -168,7 +206,8 @@ This will install all the necessary test tools for testing. There is also a Make
168206
__1.3.0__
169207

170208
- Image URLs are now protocol-relative by default. Use the new `useHttp` option to disable.
171-
- Add the ability to filter out images using the `filter` option.
209+
- Added the ability to filter out images using the `filter` option.
210+
- Added pagination support using `.next()` and `.hasNext()` methods.
172211

173212
__1.2.1__
174213

0 commit comments

Comments
 (0)