Minimal Instagram Photo Gallery Plugin With jQuery - handlegram
File Size: | 5.82 KB |
---|---|
Views Total: | 2547 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

handlegram is a simple-to-use jQuery plugin which uses JSONP to fetch and show recent or popular Instagram photos by user, location or hashtag.
Important Note:
This plugin is broken since Instagram has changed its API. You can now use the Feed Instagram Graph API plugin instead.
How to use it:
1. Load jQuery library and the jQuery handlegram plugin in the html document.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="handlegram.jquery.js"></script>
2. The plugin requires handlebars.js
for dynamic template processing.
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
3. Create the handlebars.js template for your Instagram photo gallery with the following tags:
{{image}}
: URL of the image source.{{likes}}
: Number of likes{{caption}}
: Image's caption text{{link}}
: URL to view the image on Instagram's website{{username}}
: Username{{date}}
: Date in format dd/mm/yyyy
<div class="instafeed"> <script id="instagram-template" type="text/x-handlebars-template"> {{#each this}} <div class="YOUR-CONTAINER"> <div class="photo-box"> <div class="image-wrap"> <a href="{{link}}"><img src="{{image}}" alt=""></a> </div> <div class="description"> <strong>{{likes}} Likes</strong> <p>{{username}}</p> <small>{{caption}}</small> <small>{{date}}</small> </div> </div> </div> {{/each}} </script> </div>
4. Initialize the plugin and insert your client ID into the JavaScript. By default, the plugin will get the popular photos from your Instagram account.
$('div.instafeed').handlegram({ clientId: 'YOUR CLIENT ID HERE', template: $('#instagram-template') });
5. Customize the plugin with the following options:
$('div.instafeed').handlegram({ // Instagram Client ID clientId: 'YOUR CLIENT ID HERE', // 'popular', 'tag', 'location', 'user' get: 'popular', // requires get: 'tag', tagName: null // requires get: 'location', locationId: null // requires get: 'user', userId: null // 'thumbnail', 'low_resolution', 'tandard_resolution' resolution: 'low_resolution', // Maximum number of photos limit: 10, // Callback onComplete: null });
Change log:
2016-05-02
- Empty caption fix
This awesome jQuery plugin is developed by djordjepantovic. For more Advanced Usages, please check the demo page or visit the official website.