Masonry Instagram Photo Grid With Infinite Scroll – jQuery MasonGram

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.
READ  Google File Picker API with Google Drive in Javascript - Working Example


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'


READ  Smoke.js - Javascript Library for Making Alert Boxes

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>');

Leave a Reply

Close Menu

Social Media Video Downloader

Social Media Video Downloader Website

This will close in 20 seconds