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>
