Adding and controlling Flickr badges

With the good weather in Belgium lately (it starts to feel like spring already), I am tidying up some loose ends. And I realize that my Tangosite is not coming up to date. To speed up things, I am starting to use Flickr to share my photos instead of making a solution in Domino. But this poses another problem: how to integrate Flickr images on the pages? You can make a Flickr Badge in HTML and this gives you the code to paste in your page, like:

<!-- Start of Flickr Badge -->
<style type="text/css">
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
....
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=3&display=latest&size=t&layout=v&source=user&user=16984400%40N08"></script>
</table>
</td></tr></table>
<!-- End of Flickr Badge -->

Changing the HTML

First I made a badge: HTML, square thumbnails and no layout. Then I tweaked the HTML to make it XHTML compliant, changed the number of images to 9 and make them fill as much space as they can. I also replaced the & with & and removed all inline CSS. In fact, the only thing I take from the Flickr badge is the src of the script:

<div class="box" style="max-width:300px">
<h3>Latest images</h3>
<div class="flickr">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=9
&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=
16984400%40N08"></script>
<a href="http://www.flickr.com" class="flickr_www">www.<strong>flick<span>r</span></strong>.com</a>
</div>

The CSS

I added all styles necessary to my external stylesheet:

/* flickr */
.flickr{font-size:0.8em;text-align:center}
.flickr_badge_image {margin:3px;float:left}
.flickr_www{display:block;text-align:center;text-decoration:none;color:#333}
.flickr_www strong{color:#3993ff}
.flickr_www span{color:#ff1c92}

Adding JavaScript behavior

One thing I didn't like at all: when you click on a thumbnail, the page in Flickr is opened and I lose my visitor. So I've made a little script that makes Flickr thumbnails on my page open in another window. The script includes a small version of the 'G' namespace I always use:

var G={w:window,d:document,gecko:navigator.product=='Gecko',
init:function(){for(var n in G)if(G[n].init)G[n].init()},
set:function(a,b){for(var o in b)a[o]=b[o];return a},
create:function(a,b,c,d){var o=(d||G.d).createElement(a);G.set(o,b);G.set(o.style,c);return o},
append:function(a,b,c,d){var o=b.tagName?b:G.create(b,c,d);a.appendChild(o);return o}
},$=function(a,b){return (b||G.d).getElementById(a)},$$=function(a,b){return (b||G.d).getElementsByTagName(a)}
G.w.onload=G.init

G.flickr={
init:function(){
    var m=this,o=$$('div'),i
    for(i=0;i<o.length;i++){if(o[i].className=='flickr')m.prepare(o[i])}
},
prepare:function(a){
    var o=$$('a',a),i
    for(i=0;i<o.length;i++)o[i].target="flickr"
}
}

Screenshot

As you might notice: I am experimenting with flexible layouts as well, allowing font and screen resizing without loosing the layout.

Embedded sample