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 = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; $.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", item.media.m).appendTo("#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

By

Darren Welch


  06 June 2017


Contact me online

Advertisment


Tags


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