jQuery Plugin To Create An Instagram Photo Gallery

File Size: 4.77 KB
Views Total: 9430
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.

  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.

  openEffect : 'fade',
  closeEffect : 'fade'

Change logs:



  • add Count of media to return.


  • Update my-instagram-gallery.js


  • bug fix.

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