The whole process of turning an information-rich id attribute into an informative comments block is done using Javascript. Written from scratch, this would require a lot of code but, by virtue of using one of the libraries that is readily available (jQuery), it can be boiled down into a few lines:

$(document).ready(function() {
   $(“div.flickrcomment”).each(function(){
      var aFlickr = this.id.split(“-“);
      var sPicID = aFlickr[1];
      var sSecret = aFlickr[2];
      var sServer = aFlickr[3]
      $(this).load(“http://www.web-den.org.uk/scripts/flickrgrab.php”,
         {photo_id:sPicID,
         secret:sSecret,
         server:sServer},function(){
            $(this).show(2000);
         }
      );
   });
});

Some of this is straightforward Javascript; other portions rely on jQuery. Here is the algorithm, translated into English:

Once the page has loaded and the structure is ready to manipulate, start working through all the div elements that belong to the flickrcomment class. With each one, take the id attribute and split it into an array, using the hyphens as separators. Use that information to asynchronously call (carry on with the next one while waiting for the answer to come back) a script that can look up the details on Flickr and return a formatted block of code. When the answer does arrive, reveal it on the screen with a special effect that will alert the reader that something has been updated.

The information is looked up using the Flickr API, which I might cover in another series in the future. However, I will close this set of postings tomorrow with some reflections on why, at least for the present, I have settled on jQuery as my Javascript library of choice.

Technorati Tags:

blogging

comments

flickr

javascript

jquery