jQuery Plugin To Create An Instagram Photo Grid - EveryDayImInstagrammin

EveryDayImInstagrammin is a super lightweight jQuery plugin for generating a responsive photo grid that fetches and displays the latest Instagram pictures by user or hashtag. Depending the latest Instagram JavaScript API.

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. Add jQuery library and the jQuery EveryDayImInstagrammin plugin's script to the webpages.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="everydayiminstagrammin.min.js"></script>

2. Create an empty html unordered list for the Instagram photo grid.

<ul class="instagram">
</ul>

3. Initialize the plugin and insert your own Instagram clientID & accessToken into the JavaScript.

$('.instagram').everydayImInstagrammin({
  clientID: 'YOUR CLIENTID',
  accessToken: 'YOUR ACCESSTOKEN',
});

4. Style the Instagram photo grid in the CSS

/*----------------------------------------------   
--Instagram Grid
-----------------------------------------------  */

ul.instagram {
  padding: 0 0.1em;
  margin: 0;
  display: block;
 *zoom: 1;
}

ul.instagram li {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  padding: .1em;
  margin: 0;
  z-index: 9;
  position: relative;
  transition: opacity .6s ease;
  overflow: hidden;
}
@media only screen and (min-width: 54em) {

ul.instagram li { width: 25% }
}

ul.instagram li:hover, .hover {
  opacity: .9;
  z-index: 9;
  position: relative;
  transition: opacity .6s ease
}

ul.instagram li img {
  float: left;
  overflow: hidden;
  display: table;
}

ul.instagram li a {
  color: #FFF;
  position: relative;
  display: table;
  overflow: hidden;
  text-decoration: none
}

/*----------------------------------------------   
--Instagram Captions
-----------------------------------------------  */

.everyday-caption {
  background-color: rgba(0,0,0,.65);
  top: 0;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  padding: 0.5em;
  font-size: .9em;
  -webkit-transitio: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -ms-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
  display: none;
  overflow: hidden
}

.everyday-caption p { font-size: .8em }

5. Options and defaults.

$('.instagram').everydayImInstagrammin({
  clientID: 'null',
  accessToken: 'null',
  numberPics: '12',
  imgClass: 'everyday-img',
  sequenceFadeIn: 'true',
  sequenceDuration: '220',
  captions: 'false',
  captionAlign: 'bottom',
  instaType: 'instaUser', // or byHash
  hashTag: 'fitness', // hashtag
});

---

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