JSFiddle - React, Tailwind, and code Playground
HTML
<button id='button'>Load from Flickr</button>
<button id='reset'>Reset</button>
<div id='result'></div>
JavaScript
var api_key = '9d1acc001ae89ce544564b34195ce5b1';
var api_secret = '3a365c553af1a7aa';
var image = $("<img />"),
hr = $("<hr />").css('border', '2px solid red');
var ids = [];
$('#reset').on('click', function(event) {
$('#result').html('');
});
$('#button').on('click', function(event) {
$.getJSON("https://api.flickr.com/services/rest?jsoncallback=?",
{format: 'json',
api_key: api_key,
method: 'flickr.photos.search',
license: '4',
text: 'porsche911',
extras: 'o_dims,url_o',
per_page: 500},
function(response)
{
var index = 0,
i = 0;
response.photos.photo.forEach(function(photo) {
var src = flickrURL(photo.farm, photo.server, photo.id, photo.secret, 'q'),
img = image.clone().attr('src', src),
delimiter = hr.clone();
i++;
if ( (photo.width_o >= 1000 && photo.width_o <= 1500) || (photo.height_o >= 1000 && photo.height_o <= 1500) ) {
$('#result').append(img);
index++;
if (index % 16 === 0) {
$('#result').append(delimiter);
}
}
$('#result').append('<!-- ' + i + ': ' + src + ' -->');
});
});
});
function flickrURL(farm, server, id, secret, size) {
return "https://farm" + farm + ".staticflickr.com/" + server + "/" + id + "_" + secret + "_" + size + ".jpg";
}