Using Flickr API and JSON to load Content

Posted 6 Jun 17 by Darren Welch

Loading content via the Flickr API is in fact very easy.  It is a very useful tool to load images from the Flickr database.  


For this tutorial we will be loading 6 Taekwondo images.


To start, make sure you have referenced JQuery in your page.


When the page has fully loaded we will call our function getJSONData() to connect to flickr and extract 5 images.

$("document").ready(function() { getJSONData(); });


We will connect to the API and tell it which tags we are looking for:

function getJSONData() { var flickrAPI = ""; $.getJSON( flickrAPI, { tags: "taekwondo", tagmode: "any", format: "json" }, successFn); }


As you can see we have a callback function called successFn. This function receives an object from Flickr and creates image tags to load the images.

function successFn(result) { $.each(result.items, function(i, item) { $("<img>").attr("src","#ajaxContent"); if (i === 5) { return false; } }); }


As you can see it was very simple to retrieve data from Flickr's public photos API.


Flickr content will load into this div

Darren Welch


Darren Welch

  6 Jun 17

Contact me online



 Linked In

 Git Hub

Related Content

Creating HTML Helpers

05 Feb 2017

Umbraco - RTE - Add blockquotes

05 Feb 2017

Toastr - a useful message javascript library

05 Feb 2017