Load Flickr Pictures using JSONP API

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”.


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:

  "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");

  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


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.