Using Flickr API

There are numerous fun things you can explore with the extensive Flickr API (Application Program Interface), like requesting images based on tags. Click here for a full list of Flickr API services.

This example is a highly primitive request that doesn't require an authorization key (or API key) to work, which you can acquire here. This request does have some serious limitations, however, like only being able to randomly request an image based on the user's query. This is still a good introduction to web-based APIs and using the JSON (JavaScript Object Notation) data format.

Example of using Flickr API to pull up an image of a 'cute cat'

The code below is all that was used for the example image above. The code will take the query in the textbox (txtSearch), which in this example is 'Cute cats', as a tag to request the image, which will be finally set as the source image to be displayed (selectedImage). Of course, you can get a lot more complicated with all the APIs Flickr provides, but this is still a fun little project you can work with to extend your web stills beyond what's on your own server.

JavaScript

function searchImage() {
    var keyword = document.getElementById('txtSearch').value;
    $(document).ready(function () {

        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
                {
                    tags: keyword,
                    tagmode: "any",
                    format: "json"
                },
                function (data) {
                    var image_src = data.items[0]['media']['m'].replace("_m", "_b");
                    document.getElementById('selectedImage').src = image_src;
                    currentImg = image_src;
                });

    });
}