Create Instagram photos JSON file use this script –
[code javascript]/**
* Created by wirtaw on 12.11.16.
*
* Instagram need the insert Jquery
* var jq = document.createElement(‘script’);
* jq.src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js”;
* document.getElementsByTagName(‘head’)[0].appendChild(jq);
* jQuery.noConflict();
*/
var list = [];
jQuery(‘._nljxa’).find(‘a’).each(function() {
var self = jQuery(this);
var user = ‘vladimirpoplavskij’;
var href = self.attr(‘href’);
if (-1 < href.indexOf(user)) {
var mas = href.split('?');
var item = {
id :'imageId'+(list.length+1),
url: mas[0],
cdn_image: 'https://instagram.com'+mas[0]+'media/?size=m',
show: (20>(list.length+1)),
full_name: ”,
title: ”,
tag: []
};
var img = self.find(‘img’).each(function() {
var self2 = jQuery(this);
if (” !== self2.attr(‘alt’)) {
var alt = jQuery.trim(self2.attr(‘alt’));
item.full_name =alt;
if (-1 < alt.indexOf('#')) {
var mas1 = alt.split('#');
var i=0;
var title = false;
if ('#' !== alt[0]) {
item.title = jQuery.trim(mas1[0]);
title = true;
}
for (i in mas1) {
if (0 === parseInt(i)) {
if (false === title && '' !== jQuery.trim(mas1[i])) {
item.tag.push(jQuery.trim(mas1[i]));
}
} else {
item.tag.push(jQuery.trim(mas1[i]));
}
}
} else {
item.title = alt;
}
}
});
list.push(item);
}
});
console.log('list ',list);
// To copy obj to clipboard => copy(list);[/code]
Add Masonry and Lazy plugins for pretty image placement and load.
Sample for working – http://poplauki.eu/instagram and Szawl
Try development with Instargram API, but it works only with first 20 photos. More request back 400 error.
So final version is get with script all Photos with tags and url. Next with script read JSON and show gallery first 20 photos.
Attribute show by default true for first 20 photos.
With add more add next 20 or less photos.
With select You may choose photos by tag.
Clicking on tag show all photos from JSON with this tag.
Gallery source