Masonry Instagram Photo Grid With Infinite Scroll - jQuery MasonGram

File Size: 142 KB
Views Total: 5783
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Masonry Instagram Photo Grid With Infinite Scroll - jQuery MasonGram

MasonGram is a fancy jQuery Instagram Feed plugin which fetches images from any Instagram user and displays them in a responsive Masonry-based photo grid with infinte scroll support.

More features:

  • Responsive, fluid grid layout based on Masonry.js.
  • Location and Instagram post links on hover.
  • Allows to set the max number of images to display.
  • Allows to set the image quality to fetch and display.

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 the necessary jQuery, Masonry.js and jQuery imageLoaded plugin in the html document.

<script src=""></script>
<script src=""></script>
<script src=""></script>

2. Load the jQuery MasonGram plugin's files in the document.

<link rel="stylesheet" href="masongram.min.css">
<script src="masongram.min.js"></script>

3. Create a container to place your Instagram photos.

<div id="photos"></div>

4. Call the function on the container element and insert your own Instagram access token.

  access_token: 'access token here'

5. All default configuration options.


  // endpoint
  endpoint: 'users/self',

  // infinite scroll
  loop: false,

  // the number of images to display
  count: 10,

  // distance (percent) from bottom of page where new API request is sent
  offset: 10,

  // image quality
  size: 'low_resolution',

  // HTML content of caption
  // variables: {caption}, {location}, {likes}
  caption: '{caption}',

  // location information
  location: 'inherit&caption'

6. Events available.

  access_token: 'access token here'
}).on('masongram:api:end', function () {'No more API items');
}).on('masongram:error', function () {
  if (!access_token) {
    $('#photos').after('<br><p class="text-center"><a class="btn btn-info btn-lg ' + authorization + '">Allow MasonGram to access your public photos</a></p>');



  • Fix instagram API scope


  • Added lightbox support

This awesome jQuery plugin is developed by mladenplavsic. For more Advanced Usages, please check the demo page or visit the official website.