JSFiddle - React, Tailwind, and code Playground
HTML
<button class="ig__loadmore">Load More</button>
<section class="ig__block"></section>
CSS
.ig__loadmore{
display:block;
}
.ig__feed {
float:left;
}
JavaScript
/*
Instagram AJAX Demo By parfait
email: info@parfait-inc.com
*/
var IG_BLOCK = ".ig__block";
var FEED_ELEMENT = "<article class='ig__feed'><img/></article>";
var API_URL = "https://api.instagram.com/v1/";
var USER_ID = "1590521577";
var CLIENT_ID = "e8475625b80b4e72b31c88bae9d3f2e7";
$(".ig__loadmore").click(function () {
load_ig();
});
function load_ig() {
var _self = $(this);
if (_self.data('next_id_empty')) {
alert("No more data to read");
return;
}
var max_id = _self.data('max_id');
// Get timestamp month ago
var d = new Date();
d.setHours(0, 0, 0)
d.setMonth(d.getMonth() - 1);
var min_timestamp = d / 1000 | 0;
var _url = API_URL + "users/" + USER_ID + "/media/recent/?client_id=" + CLIENT_ID + "&min_timestamp=" + min_timestamp
if (max_id != null) _url = _url + "&max_id=" + max_id;
$.ajax({
method: "GET",
url: _url,
dataType: "jsonp",
jsonp: "callback",
success: function (data) {
$.each(data.data, function (i, item) {
var tmp = $(FEED_ELEMENT);
tmp.find("img").attr("src", item.images.low_resolution.url);
$(IG_BLOCK).prepend(tmp);
});
var next_id = data.pagination.next_max_id;
if (next_id === undefined) {
_self.data('next_id_empty', true);
} else _self.data('max_id', next_id);
}
});
}