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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.1/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.pkgd.min.js"></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.

$('#photos').masongram({
  access_token: 'access token here'
})

5. All default configuration options.

$('#photos').masongram({

  // 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.

$('#photos').masongram({
  access_token: 'access token here'
}).on('masongram:api:end', function () {
  console.info('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>');
  }
});

Changelog:

2019-08-30

• Fix instagram API scope

2019-02-27

• 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.