Lab - JSONP using Flickr feeds

Using JSONP, write a page that, when loaded, will display the latest 10 Flickr images that have some tag (e.g. "Dublin", "Louvre", "Ferrari").

Your page loads data from a 3rd party site. JSONP gets around same-origin policy.


  

Background

  

Recipe

  1. Define your own function called myfn(data) which just tells us it was called: alert("myfn called");
  2. Below this, insert a script tag with src equal to the URL needed to do the Flickr call with callback function "myfn".
  3. Check that myfn actually gets called.

  4. Once myfn is being called, insert code into it to analyse data.
  5. Hint: Make a global variable called x. Set x = data; Type x in the JS console to see structure.

  6. Finally, extract n images and insert them in the page.
  7. Define a div on the page with some id.
  8. Define a variable to hold a string of HTML code: var s;
  9. Cycle through the images:
     for ( var i = 0; i < 10; i++ ) 
     {
      // get url of image i ...
      s = s + "<img src=url>";
     }
    
  10. Write the string with the images to the div: document.getElementById("id").innerHTML = s;