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