ckportfolio.com - Mashup: Flickr Search

Mashup: Flickr Search

Important note

Flickr Search

The format of this exercise is almost identical to the Wordnik counterpart, but we are using a different API URL. Refer to the following breakdown:

https://api.flickr.com/services/feeds/photos_public.gne?tags=keyword&format=json&jsoncallback=?

  • tags: Comma- or space-separated list of keywords (marked in red)
  • format: format of the output (XML or JSON)
  • jsoncallback: "hack" that allows remote JSON connection via JSONP
var baseURL = "https://api.flickr.com/services/feeds/photos_public.gne";
var tags = "tags=" + keyword;
var format = "format=json";
var callback = "jsoncallback=?";
var path = baseURL + "?" + tags + "&" + format + "&" + callback;

Construct the new API URL based on previously parsed keyword string, and call this URL via getJSON:

$.getJSON(path, function (data) {
    $("#results").html("");
    console.log(data);
    $.each(data.items, function (i, o) {
        //INSERT LOOP STATEMENT HERE
    });
});

Upon successful call to Flickr, the code empties the "results" div and proceeds with parsing through the array. As the code searches through each object, we can append the associated image into the "results" div:

var image = o.media.m;
$("#results").append("<img src='" + image + "' />");

Each image object is represented by a temporary alias "o," and this object contains various attributes that you can use. The path to the "medium" sized image is located at "o.media.m." Using this value, we can create and push the image into the "results" pane.

Upon entering the keyword and clicking "search," the code will contact the Flickr server with the keyword and retrieve the relevant images -- which will be placed in the empty results div.

Screencast Recording

https://www.dropbox.com/scl/fi/j1fj3c0xwetxxddtuzkj4/Page-3.mov?rlkey=4u1eejvs0btm6s90knrs1h3p8&dl=0

Fin