FJB - An unobtrusive, navigable flickr badge

This is your three step plan to add a flickr badge the following one to your page:

My flickr Photos

Download the badge code zip and unzip it

Insert the CSS and the JavaScript in the HEAD of your HTML document:

<style type="text/css">@import 'fjb.css';</style>
<script type="text/javascript" src="fjb.js"></script>

Add a link to your Flickr Photos with the ID "flickrlink" in your document (notice you need the ID - the thing with the @ in it - and not your clean URL):
```
<a href="http://flickr.com/photos/11414938@N00" id="flickrlink">My Flickr photos</a>
```

If there is no JavaScript available, all the visitor gets is a link to your flickr profile.

It's UGLY! I want it different!

The whole badge can be styled by you, just change the CSS to your needs. The script generates the following HTML code for the badge:

<ul id="flickrlink">
  <li class="nav"><a href="#">prev</a></li>
  <li><a [...]><img [...] ></a></li>
  [...repeated for each thumbnail...]
  <li class="nav"><a [...]>next</a></li>
</ul>

And this is the HTML for the generated large photo:

<div id="flickrshot">
  <a href="#" class="fjbcloser">X</a>
  <h4>[Title]</h4><a href="#"[...]><img [...] /></a>
  <p><a href="[...]">See full image on flickr</a></p>
</div>

It's not my language! The amount of thumbnails is wrong! I want to use other class and ID names! Change it!

If you need to change the amount of thumbnails or the wording of the labels, you can change the settings in the script:

pics:5,  
  nextLabel:'next',
  prevLabel:'prev',
  linkID:'flickrlink',
  largePicID:'flickrshot',
  navClass:'nav',
  loadingMessage:'Loading images...',
  fullImageLink:'See full image on flickr',

That's the lot. Drop feedback on the blog and also tell me when you made it prettier!