Instagram Bootstrap

by Keith Jeter

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.js"></script>
<!-- <div class="ui bottom attached tab active" data-tab="first">-->

<!-- 	<div class="btn btn-success col-xs-12 toggleAll">
	</div> -->

<div class="btn btn-success col-xs-12 toggleAll" data-text-swap="Show All Details" data-text-original="Hide All Details">Hide All Details</div>

<div class="ui container">
  <div id="instafeed" class="ui three column doubling centered grid container"></div>
</div>
<!--</div> -->

CSS

.ui.card .meta,
.ui.cards > .card .meta {
  display: none;
}

.ui.card > .content > .header+.description,
.ui.card > .content>.meta + .description,
.ui.cards > .card > .content > .header + .description,
.ui.cards > .card > .content > .meta + .description {
  margin-top: 0;
}

.ui.card > .extra,
.ui.cards > .card > .extra {
  font-size: 10px;
}

i {
  margin-right: 3px;
}

.second {
  margin-left: 10px;
}

.floated {
  font-size: 11px;
}

@media only screen and (max-width: 480px) {
  .ui.card > .content > .header:not(.ui),
  .ui.cards>.card>.content>.header:not(.ui) {
    font-weight: normal;
    font-size: 1em;
  }
  .ui.card > .content,
  .ui.cards > .card > .content {
    padding: .5em;
  }
}


/*-- --*/

.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
  padding: 8px;
}

h1 {
  font-size: 28px;
  margin-bottom: 10px;
  padding: 8px;
}

h2 {
  /* border-top: dotted 2px blue; */
  font-size: 24px;
  padding-top: 8px;
  margin-bottom: 4px;
  margin-top: 8px;
}

.tupper {
  /* border-bottom: solid 2px blue; */
  padding: 0;
  padding-bottom: 8px;
  margin: 0;
}

.main_wrap {
  padding-bottom: 0;
  border-bottom: solid 2px blue;
  margin-bottom: 10px;
}

/* .grip_wrap:after {
  content: '';
  position: absolute;
  z-index: 1;
  display: block;
  width: 50px;
  height: 5px;
  background: blue;
  top: 50%;
  right: 0;
}

.grip_wrap:before {
  content: '';
  position: absolute;
  z-index: 1;
  display: block;
  width: 50px;
  height: 5px;
  background: blue;
  top: 50%;
  left: 0;
}...

JavaScript

$(function() {
  var accessToken = '271323200.1677ed0.67c49d5002704bc09c3c77320ec138a2'; // use your own token

  $.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token=' + accessToken + '&callback=?', function(insta) {
    console.log(insta);
    $.each(insta.data, function(photos, src) {
      if (photos === 33) {
        return false;
      }
      var date = new Date(parseInt(this.created_time) * 1000);
      // template
      $(
        '<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 grip_wrap">' +
        '<div class="col-xs-12 grip">' +
        '<a class="fancybox zero" rel="gallery1" href="' + this.images.standard_resolution.url + '">' +
        '<img title="' + this.caption.text + '" src="' + this.images.thumbnail.url + '" />' +
        '</a>' +
        //'<div class="col-xs-12 coat2 truncate">' + this.tags + '</div>' +
        '<div title="' + this.caption.text + '" class="col-xs-12 coat2 truncate">' + this.caption.text + '</div>' +
        '<span class="right floated col-xs-12 coat heart-wrap">' + '<i class="fa fa-heart">' + '</i>' + this.likes.count + ' likes' + '</span>' +
        '<span class="left floated col-xs-12 coat comment-wrap">' + '<i class="fa fa-comment">' + '</i>' + this.comments.count + ' comments' + '</span>' +
        '<span class="left floated col-xs-12 coat check-wrap">' + '<i class="fa fa-check">' + '</i>' + 'Posted ' + (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear() + '</span>' +
        '<a href="' + this.link + '" target="_blank"><div class="col-xs-12 btn btn-primary">View in Instagram</div></a>' +
        '</div>' +
        '</div>'
      ).appendTo('#instafeed');
    });
  });
});

//////////////

$('.toggleAll').on('click',function(){
    $('.pp, .coat, .heart-wrap, .comment-wrap, .check-wrap, .grip .btn').slideToggle('fast');

		var el = $(this);

		el.text() == el.data("text-swap") 
    ? el.text(el.data("text-original")) 
    :...