Using Flickr API and JSON to load Content

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

Comment

---