Dr. Mark Humphrys

School of Computing. Dublin City University.

Home      Blog      Teaching      Research      Contact


CA216      CA249      CA318

CA400      CA651      CA668

Javascript Flickr application

Design a Flickr sidebar that can be used in web pages as follows:
  1. Flickr sidebar can be used on a website in a right-hand side column.
  2. In the Flickr sidebar you can enter a search term in a box, and then on some trigger (e.g. key press, lose focus, or a button is clicked) some Javascript code will (without reloading the page):
  3. Fetch an XML or JSON public feed from Flickr of recent images with that tag, and then:
  4. Parse the XML or JSON with Javascript on the client-side and show the images in some kind of display in the sidebar. The display should highlight the title and author, show the image in a small size, and link to the photo page on Flickr.

  5. In the JSON feed, you can get a nice HTML snippet in:
  6. In the XML feed, you can get a nice HTML snippet in:
    <content type="html">
     quoted HTML payload
    (You have to convert the payload to normal HTML.)

  7. What to hand up

You can use either of these strategies:
  1. Respect same-origin policy:
    Use Ajax to run a program on the same server your Javascript is from. Probably use PHP. This server-side program gets the feed from Flickr.
    Get PHP to output just the XML or JSON feed (no HTML) using a HTTP header line:
    Content-type: (MIME type for XML)
    Content-type: (MIME type for JSON)

  2. Get around same-origin policy:
    Use JSONP to get the feed from Flickr direct.

You can use either of the above strategies. But you may not use a library like jQuery. And you may not use sample code from anyone else. I want you to write (and comment) the basic Javascript code yourself. Also, for clarity, you may not use anonymous functions.

Feeds      w2mind.org

On Internet since 1987.