Load Flickr Pictures using JSONP API
Share:
Free JavaScript Book!
Write powerful, clean and maintainable JavaScript.RRP $11.95
This article was updated on 23rd June, 2016. Specifically: the code example was revised, a CodePen demo was added and formatting issues were fixed.
Flickr is a leading image and video hosting website owned by Yahoo. They offer a public API which can be used to return a list of photos matching a certain criteria.
To return an API response in JSON format, you would send a parameter format
in the request with a value of json
. For example, the following will return a list of photos tagged “kitten”.
https://api.flickr.com/services/feeds/photos_public.gne?tags=kitten&format=json
This method of querying the Flickr API does not require authentication. You can find a list of possible arguments here: https://www.flickr.com/services/api/flickr.photos.search.html.
A Typical Flickr JSON Object
This is what a typical Flickr JSON object looks like:
jsonFlickrFeed({
"title": "Recent Uploads tagged kitten",
"link": "http://www.flickr.com/photos/tags/kitten/",
"description": "",
"modified": "2016-06-19T09:32:56Z",
"generator": "http://www.flickr.com/",
"items": [
{
"title": "Portrait of Simba and Mogli",
"link": "http://www.flickr.com/photos/112684907@N06/27665373772/",
"media": {"m":"http://farm8.staticflickr.com/7442/27665373772_25bb8acec1_m.jpg"},
"date_taken": "2016-06-17T17:09:38-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/112684907@N06/\">stefanhuber92<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/112684907@N06/27665373772/\" title=\"Portrait of Simba and Mogli\"><img src=\"http://farm8.staticflickr.com/7442/27665373772_25bb8acec1_m.jpg\" width=\"177\" height=\"240\" alt=\"Portrait of Simba and Mogli\" /><\/a><\/p> ",
"published": "2016-06-19T09:32:56Z",
"author": "nobody@flickr.com (stefanhuber92)",
"author_id": "112684907@N06",
"tags": "pet cats cute eye animal animals cat tiere kitten siblings katze katzen fell haustier liebe tier gemütlich petlove geschwister kuscheln schön catlove süs petlover"
},
...
19 more items
...
]
})
Load Flickr Pictures Using the JSONP API
As you can see, the JSON response is wrapped in a function jsonFlickrFeed
. We can use this to pull in pictures from Flickr and display them on our web page like so:
function jsonFlickrFeed(json) {
$.each(json.items, function(i, item) {
$("<img />").attr("src", item.media.m).appendTo("#images");
});
};
$.ajax({
url: 'https://api.flickr.com/services/feeds/photos_public.gne',
dataType: 'jsonp',
data: { "tags": "kitten", "format": "json" }
});
If you’d like to learn more about JSONP, read: jQuery’s JSONP Explained with Examples
Demo
This is what we end up with.
See the Pen vKXZrz by SitePoint (@SitePoint) on CodePen.
You can read more about the Flickr API on the API homepage.
Network admin, freelance web developer and editor at SitePoint.
New books out now!
Get practical advice to start your career in programming!
Master complex transitions, transformations and animations in CSS!
Latest Remote Jobs


