Flickr Badge Viewer

In my quest to make free blog hosting work more like a having your own full website I've finally added something I've been wanting to do for a long time - Flickr Badge Viewer.

Flickr provided a JavaScript file that you can place in your site and it will display however many images you set.  You can see the four photos to your right (or here if your viewing through an aggregator).

I threw together some JavaScript to take the HTML that Flickr feeds to the client and strip out the image url, Flickr url, and image title.  I then re-write the anchor tag for each image to call a JavaScript function (displayImage) to remove the main content of the site and display the image.

<script language ="javascript">

var mainHTML;

function displayImage(img, url, title)

{

    //Replace the main2 div element with the image.

    var main = document.getElementById("main2");

    main.innerHTML = "<div style='font-size:17pt;font-weight:bold;margin-top:5px;margin-bottom:5px'>" + title + "</div><a href='" + url + "'>View this image on Flickr</a> | <a href='javascript:displayImageClose();'>Close</a><br/><br/><img src='" + img + "' />";

}

function displayImageClose()

{

    //Put the original html back into the div element

    var main = document.getElementById("main2");

    main.innerHTML = mainHTML;

}

function editFlickrBadge()

{

    //In the event the javascript from Flickr

    // messes up then don't do anything.

    try

    {

        //main2 is where we're going to put the image

        var main = document.getElementById("main2");

        mainHTML = main.innerHTML;

       

        //photos is the div element wrapping the

  // Flickr Badge javascript

        var rootNode = document.getElementById("photos");

        for (i=0; i<rootNode.childNodes.length; i++)

        {

            if (rootNode.childNodes[i].nodeName == "A")

            {

                aNode = rootNode.childNodes[i];

                imgNode = aNode.childNodes[0];

                title = imgNode.title;

                img = imgNode.src;

                img = img.replace("_s.jpg",".jpg" );

                url = aNode.href;

                aNode.href = "javascript:displayImage('" +

 img + "','" + url + "','" + title + "')";

             }

        }

    }catch(ex){}

 }

 //Calling this function should probably be called after the page loads

 // ...but I'm lazy

 editFlickrBadge();

 </script>