Making Flickr Badges Open New Window

Posted Monday, August 31, 2009 11:24:05 AM

I recently added a Flickr Badge to the header of my blog and really loved everything about it except that... there was no way to have it open the photos in a new window when they were clicked. Because the code was written by Flickr I had no way to modify it before it was created, but I did afterwards. Here is the code Flickr gave me to add the badge to my site minus some extra "fluff" code that I've removed for the sake of shortening this post:

<table cellpadding="0" cellspacing="0" border="0" id="flickr_badge_wrapper">
	<tr>
	<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?
	count=6&display=random&size=s&layout=h&source=user_set&user=21767427%40N05
	&set=72157607489449250&context=in%2Fset-72157607489449250%2F"></script>
	</tr>
</table>

So, I simply wrote a script that would loop back through all of the links within the table "flickr_badge_wrapper" and change their "target" property to "_blank". Here is the code.

<script>
<!--
	var oFlickrTable = document.getElementById("flickr_badge_wrapper");

	oFlickrBadgePhotos = oFlickrTable.getElementsByTagName("a");

	for (nBadgePhoto = 0; nBadgePhoto < oFlickrBadgePhotos.length; nBadgePhoto++) {

		oFlickrBadgePhotos[nBadgePhoto].target = "_blank";
		
	}
//-->
</script>

Feel free to use this code yourself, just be sure that if you've renamed "flickr_badge_wrapper" (or Flickr changed the name by the time you read this article) that you update my code. Enjoy!

---

Post A Comment

Name

Email

Message

View Comments

There are 34 comments on this article