Instagram

index.haml

%header#header
  %h1 INSTAGRAM
  %p Display your Instagram photos on your website with a little Javascript.
%section#content

instagram.markdown

Instagram

A Pen by Trent Polack on CodePen.

License.

script.js

$(function(){
  var accessToken = '273700138.f359f2c.f6d5dd3e37704cb8b976331d56706931';
  $.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) {
    $.each(insta.data,function (photos,src) {
      if ( photos === 20 ) { return false; }
      $('<a href="'+src.link+'" class="post">'+
        '<div class="image" style="background-image:url('+src.images.standard_resolution.url+');"></div>'+
        '<ul>'+
        '<li><i class="fa fa-camera"></i> '+src.filter+'</li>'+
        '<li><i class="fa fa-heart"></i> '+src.likes.count+'</li>'+
        '<li><i class="fa fa-comment"></i> '+src.comments.count+'</li>'+
        '</ul></a>').appendTo('#content');
    });
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800');
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);

$accent: #9D6D55;

*, *:before, *:after { box-sizing: border-box; }
body {
  font-family: 'Open Sans', sans-serif;
  font-size: 10pt;
  color: #333;
  line-height: normal;
  font-smoothing: antialiased;
}
#header {
  position: relative;
  width: 100vw;
  padding: 25px;
  border-top: 10px solid $accent;
  h1 { font-size: 30pt; color: $accent; }
}
#content {
  position: relative;
  width: 100vw;
  display: flex;
  flex-flow: row wrap;
  .post {
    position: relative;
    width: 25vw; height: 25vw;
    background: #000;
    display: block;
    overflow: hidden;
    .image {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-position: center;
      background-size: cover;
      transition: all .15s ease-in-out;
    }
    ul {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 50px;
      background: rgba($accent,.8);
      display: flex;
      justify-content: space-around;
      transform: translateY(-100%);
      transition: all .15s ease-in-out;
      color: #FFF;
      li { text-align: center; line-height: 50px; }
    }
    &:hover {
      .image { opacity: .5; transform: scale(1.15) translate3d(0,0,0); }
      ul { transform: translateX(0); }
    }
  }
}