jQuery Plugin To Create An Instagram Photo Gallery

jQuery Plugin To Create An Instagram Photo Gallery
File Size: 4.77 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

Related Plugins:

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

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.