Upon reviewing the Flickr API Service page for the method
https://api.flickr.com/services/feeds/photos_public.gne
, I couldn't find a limit parameter specified.
https://i.sstatic.net/JU4p7.png
Nevertheless, you can actually limit the number of results displayed within a loop. Despite this limitation, all results from the
https://api.flickr.com/services/feeds/photos_public.gne
method will still be fetched in the background.
Here is an example:
(function() {
var form = document.getElementById("form");
form.onsubmit = function(e) {
$.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?tags=rat&format=json&callback=?", window.jsonFlickrFeed);
e.preventDefault();
};
})();
window.jsonFlickrFeed = function(data) {
var i, len = data.items.length, html = "", limit = document.getElementById("txtLimit").value * 1;
for (i = 0; i < limit; i++) {
html += "<img src=\"";
html += data.items[i].media.m;
html += "\" />";
}
document.getElementById("list").innerHTML = html;
};
#list {
border: solid 1px #ccc;
}
#results img {
padding: 5px;
width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form">
<label for="txtLimit">Limit:</label>
<input id="txtLimit" min="0" type="number" value="0" />
<button type="submit">Send</button>
<hr />
<div id="list"></div>
</form>
Update:
jQuery works with JSONP while pure JavaScript XMLHttpRequest does not due to how jQuery.getJSON() handles the resource as if it were a script.
https://i.sstatic.net/2z4wv.png
Despite the absence of Access-Control-Allow-Origin: * in the response headers, it doesn't pose any issue in this context. The script can still be requested using:
<script src="https://api.flickr.com/services/feeds/photos_public.gne?tags=rat&format=json&callback=?" type="text/javascript"></script>
Make sure to check the
content-type: application/javascript;
.
https://i.sstatic.net/G1aYQ.png
The response from the URL is a function named jsonFlickrFeed(Object parameter) where the parameter is in JSON format.
{
"title": "Recent Uploads tagged rat",
"link": "https:\/\/www.flickr.com\/photos\/tags\/rat\/",
...
}
https://i.sstatic.net/Ngpyn.png
To achieve this functionality using Native JavaScript and JSONP, you need to create a function that calls the URL through a script tag to run the jsonFlickrFeed({}) function.
Demo: Native JavaScript + JSONP:
(function() {
function request(url, callback) {
var head = document.head, script = document.createElement("script");
script.src = url;
script.type = "text/javascript";
head.appendChild(script);
// Remove the script tag after it's loaded once.
script.onload = function() {
this.remove();
};
window[callback] = function(data) {
var i, len = data.items.length,
html = "",
limit = document.getElementById("txtLimit").value * 1;
for (i = 0; i < limit; i++) {
html += "<img src=\"";
html += data.items[i].media.m;
html += "\" />";
}
document.getElementById("list").innerHTML = html;
};
}
var form = document.getElementById("form");
form.onsubmit = function(e) {
e.preventDefault();
var url = "https://api.flickr.com/services/feeds/photos_public.gne?tags=rat&format=json&callback=?";
request(url, "jsonFlickrFeed");
};
})();
#list {
border: solid 1px #ccc;
}
#results img {
padding: 5px;
width: 50%;
}
<form id="form">
<label for="txtLimit">Limit:</label>
<input id="txtLimit" min="0" type="number" value="0" />
<button type="submit">Send</button>
<hr />
<div id="list"></div>
</form>