Using Flickr API and JSON to load Content

6 Jun 17

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 = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; $.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", 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





Comments

Darren Welch

By

Darren Welch


  6 Jun 17


Contact me online

 Facebook

 Twitter

 Linked In

 Git Hub