Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!doctype HTML>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.css">
<link rel="stylesheet" href="styles.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="row" id="photos">
</div>
</div>
<a href="#" id="next-page" class="btn btn-default">Load Next Page</a>
</body>
</html>
var instagramUrl = '';
var loading = false;
function successCallback(response) {
console.log('loaded');
var photosElement = document.getElementById('photos');
console.log(response);
response.data.forEach(function(photo) {
var html = '';
html += '<a class="col-md-3 photo" href="' + photo.link + '">';
html += '<img src="';
html += photo.images.standard_resolution.url;
html += '">';
html += '</a>';
photosElement.innerHTML += html;
});
instagramUrl = response.pagination.next_url;
loading = false;
}
$(document).ready(function() {
instagramUrl = 'https://api.instagram.com/v1/tags/canadaday/media/recent?client_id=0d9085d9f9c249faa9abc68f8b2e8ed5';
$('#next-page').click(function() {
console.log(loading);
if (loading) return;
loading = true;
var options = {
type: 'GET',
dataType: 'jsonp',
url: instagramUrl,
success: successCallback,
}
$.ajax(options);
return false;
});
$('#next-page').trigger('click');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment