Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<html>
<head>
<meta http-equiv="refresh" content="60" />
<!--link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" -->
<!-- link href="picwall.css" rel="stylesheet" /-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>
<!--script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script-->
<!--script src="picwall.js"></script-->
<style>
body { background-color: #000000; }
img {
padding: 5px;
border: 2px solid #ffffff;
}
/* force scrollbar */
html { overflow-y: scroll; }
body {
font-family: sans-serif;
}
/* ---- isotope ---- */
.grid {
background: #DDD;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
width: 20%;
}
.grid-item {
float: left;
}
.grid-item img {
display: block;
max-width: 100%;
}
</style>
<script type="text/javascript">
function parse_token_from_url() {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("#access_token=([^&#]*)"),
results = regex.exec(location.hash);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
function get_instagram_access_token() {
var clientID = "37acfd2aa290441887bda1d41c067867";
var redirectURL = location.href;
var authURL = "https://instagram.com/oauth/authorize/?client_id=" + clientID + "&redirect_uri=" + redirectURL + "&response_type=token";
var accessToken = parse_token_from_url();
if (!accessToken) {
window.location.href = authURL;
}
return accessToken;
}
function to_img(obj) {
var link = obj.link,
caption = obj.caption.text,
user = obj.user.username,
image = obj.images.standard_resolution;
var src = image.url,
width = image.width,
height = image.height;
return "<div class='grid-item'><a href='" + link + "'><img src='" + src + "' /></a></div>";
}
function loadRecentMediaWithTag(tag, target, token) {
var endpoint = "https://api.instagram.com/v1/tags/" + tag + "/media/recent?access_token=" + token;
$.ajax({
url: endpoint,
dataType: 'jsonp',
success: function(response) {
var items;
console.log(response);
$.each(response.data, function(idx, obj) {
if (obj.type == "image") {
target.append(to_img(obj));
}
console.log(obj);
});
},
});
}
$( document ).ready(function() {
var access_token = get_instagram_access_token();
loadRecentMediaWithTag('BecomingThePitsons', $('#pics'), access_token);
// init Masonry
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
percentPosition: true,
columnWidth: '.grid-sizer'
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry();
});
});
</script>
</head>
<body>
<div class='grid' id='pics'><div class="grid-sizer"></div></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment