soultank [the blog]

  • Home
  • About
  • Contact
  • Bookstore
  • Flickr
  • Sitemap
  • Departments
    • aberdeen meet up
    • color theory
    • conferences
    • exhibitions
    • flash
    • general
    • graphic design
    • illustration
    • local art
    • motion graphics
    • music
    • open source
    • photography
    • photoshop
    • quotes
    • typography
    • usability & accessibility
    • web site design
      • css
      • html
      • javascript
  • Subscribe via RSS

Flickr Badge Opens New Window

February 10th, 2010  |  by dod..... Published in javascript

I recently came across a simple little solution to a simply annoying artifact of the most excellent ‘Create Your Own Badge‘ from Flickr.

First off, a thank you goes out to Adam Lewis of www.adamwlewis.com for coming up with a solution, a second off (if there is such a phrase), I’m not a coder, just a humble designer that’s trying to ensure his websites function the way they should.

The problem is that when a user clicks on any of the images it displays it always opens the Flickr page in the same window, which you don’t want ideally.

So here is the solution:

  1. Copy the code
  2. Paste the Code
  3. Test the Code

Copy the code below and paste it below the block level element (div, table, whatever) containing your Flickr code, refresh the page, click on one of your images and that should be it.
<script type=”text/javascript”>
<!–
var oFlickrTable = document.getElementById(“flickr_badge_wrapper”);
oFlickrBadgePhotos = oFlickrTable.getElementsByTagName(“a”);
for (nBadgePhoto = 0; nBadgePhoto < oFlickrBadgePhotos.length; nBadgePhoto++) {
oFlickrBadgePhotos[nBadgePhoto].target = “external”;
}
//–>
</script>

I have used the oFlickrBadgePhotos[nBadgePhoto].target = “external”; because on the particular site I was working on it used the rel=”external” attribute, but you may be using the target=”_blank” so you’d add _blank instead i.e. oFlickrBadgePhotos[nBadgePhoto].target = “_blank”;

The only difference to the code above to what Adam has suggested is that I’ve added <script type=”text/javascript”> as opposed to just <script>, this’ll ensure that it validates properly.

You can see this code in action on the Stevie Brown website, with some of his Flickr photos in the middle of the home page.

Stevie Brown flickr section

Leave a Response

Departments

Latest Weblog Entries

  • Dod Surfing
  • The Cinematic Orchestra
  • Harrisons – what the fonts?
  • Ninja Tune – Week XIII
  • Willies

Archives


Twitter updates

  • Time to check the surf out at Fittie, Aberdeen once more, should be a good one this evening, c'mon! 22 mins ago
  • Lunch... 5 hours ago
  • Lord give me strength. Client+pixel perfection+IE6=BIG sigh 6 hours ago

Tag cloud

typography font Global Science Studio Theatre Group STG how-to type apps Aberdeen fonts music Illustrator css icons free Firefox3 Liz Lochhead software blog Medea google Twitter fix bugs record pdf javascript open source typeface iPhone mp3 tutorial wordpress cms web development magazine illustration flash web design flickr design radio games poster Ninja Tune

Copyright © 2010 soultank [the blog]
Powered by WordPress using the Gridline Lite theme by Graph Paper Press.

Site last updated September 5, 2010 @ 10:52 am; This content last updated February 26, 2010 @ 8:02 am

Switch to our mobile site