shawnchin · August 1, 2015 16:17
diff --git a/index.html b/index.html
 <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>
	<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>