Using Flickr API and JSON to load Content

Posted 06 June 2017 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 images of dogs.


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: "labrador", 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

  06 June 2017

Contact me online



json flickr ajax api

Has this helped?

If this has saved you time and you are feeling generous, why not buy me a coffee.

Thank You cup of coffee

Related Content

React JS front end working with Umbraco REST API

14 Nov 2018

How to write HTML faster using Zen Coding

16 Apr 2018

Bat and ball game built with HTML & JS

03 May 2018