You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+64-1Lines changed: 64 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -8,9 +8,13 @@ __Examples:__
8
8
9
9
-[Hemeon.com](http://hemeon.com/) by [Marc Hemeon](https://twitter.com/hemeon)
10
10
-[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)
11
12
-[The Kozik Cocoon](http://www.kozikcocoon.com/) by [Danny Palmer](http://twitter.com/dannyprose)
12
13
13
-
_Used Instafeed.js on a project recently? Tweet them to [@stevenschobert](http://twitter.com/stevenschobert)._
14
+
15
+
__Buy me a coffee:__
16
+
17
+
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).
14
18
15
19
## Installation
16
20
Setting up Instafeed is pretty straight-forward. Just download the script and include it in your HTML:
@@ -66,6 +70,8 @@ The only thing you'll need to get going is a valid __client id__ from Instagram'
66
70
-`random` - Random order.
67
71
-`links` (bool) - Wrap the images with a link to the photo on Instagram.
68
72
-`limit` (number) - Maximum number of Images to add. __Max of 60__.
73
+
-`useHttp` (bool) - By default, image urls are protocol-relative. Set to `true`
74
+
to use the standard `http://`.
69
75
-`resolution` (string) - Size of the images to get. Available options are:
70
76
-`thumbnail` (default) - 150x150
71
77
-`low_resolution` - 306x306
@@ -78,6 +84,24 @@ The only thing you'll need to get going is a valid __client id__ from Instagram'
78
84
-`success` (function) - A callback function called when Instagram returns valid data. (argument -> json object)
79
85
-`error` (function) - A callback function called when there is an error fetching images. (argument -> string message)
80
86
-`mock` (bool) - Set to true fetch data without inserting images into DOM. Use with __success__ callback.
87
+
-`filter` (function) - A function used to exclude images from your results. The function will be
88
+
given the image data as an argument, and expects the function to return a boolean. See the example
89
+
below for more information.
90
+
91
+
__Example Filter (get username + tagged):__
92
+
93
+
```js
94
+
var feed =newInstafeed({
95
+
get:'user',
96
+
userId:USER_ID,
97
+
filter:function(image) {
98
+
returnimage.tags.indexOf('TAG_NAME') >=0;
99
+
}
100
+
});
101
+
feed.run();
102
+
```
103
+
104
+
To see a full list of properties that `image` has, see [issue #21](https://github.com/stevenschobert/instafeed.js/issues/21).
81
105
82
106
## Templating
83
107
@@ -108,6 +132,37 @@ Notice the `{{link}}` and `{{image}}`? The templating option provides several ta
108
132
-`{{location}}` - Name of the location associated with the image. Defaults to empty string if there isn't one.
109
133
-`{{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.)
110
134
135
+
## Pagination
136
+
137
+
As of __v1.3__, Instafeed.js has a `.next()` method you can call to load more images from Instagram.
138
+
Under the hood, this uses the _pagination_ data from the API. Additionall, there is a helper
139
+
`.hasNext()` method that you can use to check if pagination data is available.
140
+
141
+
Together these options can be used to create a "Load More" button:
142
+
143
+
```js
144
+
// grab out load more button
145
+
var loadButton =document.getElementById('load-more'),
146
+
147
+
feed =newInstafeed({
148
+
// every time we load more, run this function
149
+
after:function() {
150
+
// disable button if no more results to load
151
+
if (!this.hasNext()) {
152
+
loadButton.setAttribute('disabled', 'disabled');
153
+
}
154
+
},
155
+
});
156
+
157
+
// bind the load more button
158
+
loadButton.addEventListener('click', function() {
159
+
feed.next();
160
+
});
161
+
162
+
// run our feed!
163
+
feed.run();
164
+
```
165
+
111
166
## Security Considerations
112
167
113
168
With Instafeed, it is possible to get images from a specific user id:
@@ -145,6 +200,14 @@ This will install all the necessary test tools for testing. There is also a Make
145
200
146
201
## Change Log
147
202
203
+
__1.3.0__
204
+
205
+
- Image URLs are now protocol-relative by default. Use the new `useHttp` option to disable.
206
+
- Added the ability to filter out images using the `filter` option.
207
+
- Added pagination support using `.next()` and `.hasNext()` methods.
208
+
- Removed the default `limit` of 15 images. The option is still supported, but by default no limit
209
+
is sent to the API.
210
+
148
211
__1.2.1__
149
212
150
213
- Fixed IE8 error "Object doesn't support this action".
0 commit comments