Instagram Feed

by m4xout

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/instafeed.js/1.4.1/instafeed.min.js"></script>
<div id="instafeed"></div>
<div id="more"><p><span class="oi" data-glyph="reload"></span>Load More Images...</p></div>
<div id="nomore"><p><span class="oi" data-glyph="check"></span>All Images Loaded!</p></div>

CSS

/* Global Styles */

@import url("//fonts.googleapis.com/css?family=Open+Sans+Condensed:300");

html,body {
background:#222;
font-family:"Open Sans Condensed", sans-serif;
height:100%;
width:100%;
}


/* Template Styles */

#instafeed {
margin:.5rem;
}

#instafeed a {
box-shadow:0 1px 3px rgba(0,0,0,.7);
color:#444;
display:inline-block;
margin:.5rem;
overflow:hidden;
position:relative;
text-decoration:none;
width:calc(100% / 4 - 1rem);
}

#instafeed img {
display:block;
height:auto;
max-width:100%;
width:100%;
}

#instafeed .filter {
background-color:#f6f6f6;
box-shadow:0 0 5px 0 rgba(0,0,0,.2);
display:block;
font-size:1rem;
padding:10px;
position:absolute;
right:-30px;
text-align:center;
top:12px;
transform:rotate(45deg);
width:100px;
}

#instafeed .info {
background-color:#f6f6f6;
height:auto;
padding:.4rem .6rem .3rem;
}

#instafeed .info p {
font-size:1.1rem;
line-height:1.5rem;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}

#instafeed .likes {
position:absolute;
right:.6rem;
bottom:.3rem;
}

#instafeed .likes p {
font-size:.9rem;
position:absolute;
right:1.2rem;
bottom:.3rem;
}

#more,
#nomore {
background-color:#f6f6f6;
box-shadow:0 1px 3px rgba(0,0,0,.7);
cursor:pointer;
display:none;
margin:.5rem 1rem 0;
padding:.8rem .6rem .7rem;
}

#more p,
#nomore p {
color:#444;
display:inline;
font-size:1rem;
}

#more span,
#nomore span {
position:relative;
top:1px;
}

#nomore {
cursor:auto;
opacity:.4;
}


/* Icon Font Styles */

.oi::before {
font-size:.9rem;
margin-right:.5rem;
}

.oi[data-glyph="comment-square"]::before {
color:#a4d0e1;
}

.oi[data-glyph="compass"]::before {
color:#efc7e2;
}

.oi[data-glyph="clock"]::before {
color:#a7e9c0;
}

.oi[data-glyph="heart"]::before {
color:#f8c0d0;
margin-right:0;
position:relative;
top:-3px;
}

.oi[data-glyph="reload"]::before,
.oi[data-glyph="check"]::before {
color:#bbb;
}


/* Media Queries */

@media screen and (min-width:1400px) {
#instafeed a { width:calc(100% / 5 - 1rem); }
}

@media screen...

JavaScript

// Instafeed Website: http://instafeedjs.com/
// Inspiration: https://codepen.io/markmurray/pen/dtseB

$(document).ready(function () {
    // pagination buttons
    var more = $("#more");
    var nomore = $("#nomore");
    
    // feed settings
    var feed = new Instafeed({
        get: 'user',
        userId: 195761337,
        accessToken: '195761337.1677ed0.44206195a27b493182a0a4ee4749773d', // http://instagram.pixelunion.net/
        target: 'instafeed',
        limit: 15, // max 60
        sortBy: 'most-recent',
        resolution: 'standard_resolution',
        // when each set of images are loaded... *
        after: function () {
            // * check for more images
            if (!this.hasNext()) {
                more.hide();
                nomore.show();
            } else {
                more.show();
                nomore.hide();
            }
            // * animate new set of images and add class to each image
            $('.image').not('.animated').velocity('transition.slideUpIn', {
                stagger: 150
            }).addClass('animated');
            // * cache location name
            var loc = $('.location');
            // * hide location if not set
            loc.each(function () {
                if (!$(this).text().trim().length) {
                    $(this).css('visibility', 'hidden').insertAfter($(this).next());
                }
            });
        },
        // for each image... *
        filter: function (image) {
            // * create new date object and pass in image date
            var date = new Date(image.created_time * 1000);
            // * create months array
            var months = new Array(12);
            months[0] = 'January';
            months[1] = 'February';
            months[2] = 'March';
            months[3] = 'April';
            months[4] = 'May';
            months[5] = 'June';
            months[6] = 'July';
            months[7] = 'August';
            months[8] = 'September';
    ...