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.
How to use it:
1. Load the necessary jQuery, Masonry.js and jQuery imageLoaded plugin in the html document.
|
1 2 3 |
<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.
|
1 2 |
<link rel="stylesheet" href="masongram.min.css"> <script src="masongram.min.js"></script> |
3. Create a container to place your Instagram photos.
|
1 |
<div id="photos"></div> |
4. Call the function on the container element and insert your own Instagram access token.
|
1 2 3 |
$('#photos').masongram({ access_token: 'access token here' }) |
5. All default configuration options.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
$('#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.
|
1 2 3 4 5 6 7 8 9 |
$('#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>'); } }); |
