jQuery Plugin To Create An Instagram Photo Gallery

A tiny jQuery plugin that fetches your profiles and photos from Instagram and displays them as a photo gallery on your website.

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. Include jQuery library and the jQuery My Instagram Gallery plugin's files in your web page.

<link rel="stylesheet" href="my-instagram-gallery.css">	
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="my-instagram-gallery.js"></script>

2. Include the jQuery fancybox plugin to display the large version of your photo in a nice responsive lightbox.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>

3. Create a container to display your profile information.

<div class="bcr_ins_profile"></div>

4. Create a container to display a gallery of your Instagram photos.

<div class="bcr_ins_gallery"></div>

5. Find your Instragram User ID here and insert it into JavaScript.

bcr_mig(
  ins_id = 503807090, // your user_id
  ins_count = 2, // Count of media to return
  ins_token = '141970.467ede5.edbc9c37472d41b790e1db8948793f11' // your token
);

6. Customize the fancybox plugin.

$(document).ready(function(){	   
$(".ins_popup").fancybox({   
  openEffect : 'fade',
  closeEffect : 'fade'
});	 
}); 

Change logs:

2016-04-20

• JS update

2015-11-09

• add Count of media to return.

2015-04-29

• Update my-instagram-gallery.js

2014-09-27

• bug fix.

---

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