Minimal Instagram Photo Gallery Plugin With jQuery - handlegram

Minimal Instagram Photo Gallery Plugin With jQuery - handlegram
File Size: 5.82 KB
Views Total: 2177
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.

THE PLUGIN IS NOLONGER MAINAINED. Use the jQuery instagramFeed 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.