...or; A flexible and unobtrusive flickr js-badge

Thumbnail with flickr watermark and mouse pointerAlthough flickr provides some great services, their "badge" leaves a lot to be desired. Basically I just want something that validates, provides some basic configuration options and is fully styleable through CSS. Not finding a suitable replacement (coupled with the fact that I needed to find solutions to some of IE's js quirks anyway), I decided this would be a good opportunity to expand on my js abilities.

Other than the stuff outlined above, the things I wanted to do was to create a script that was based on the W3C "Document Object Model" and (to prevent long page load times when waiting for remote content) figure out a method of control over how and/or when the function was run. Lastly I wanted to make it easy to use the function together with a Lightbox display script.

The latter, controlling execution ended up being the easy one. While looking for a suitable "badge script" I came across Patrick Quinn-Graham's "DOM Flickr Badge". He's coded a nice solution, but not what I was looking for. I did however pick up his solution for "deferring JavaScript execution". Basically this holds off (iow; defer) js execution and lets the (JSON formated) feed from flickr trigger execution of our local script. The feed can be customized using flickr's normal array of limiters. Exactly the kind of solution I was looking for...

Next up was the issues with IE. For one or another reason, in IE setting values for certain attributes doesn't actually do anything (nor throw an error). Basically IE doesn't allow scripts to directly set (or create) values for neither class nor style attributes, instead it require scripts to use the proprietary attributes classname and "style.cssText". Works exactly like you'd expect the DOM compliant methods to work, so why in the world they've implemented it like this remains a mystery. I've created (and included) a simple wrapper to set values for these attributes in IE.

At this point it was just a question of combining the different parts into generating the output I was aiming for. It is fully styleable through CSS, as an example it could look like this (screenshot from the demo).

8 thumbnail images with a flickr logo styled link overlay

Basically the function generates an unordered list with the number of sub items specified in the settings. Each list item contains a thumbnail (normal or square) linked to a larger version of the image and a link back to the photo's page at flickr (the last letter in a span so it can be styled like the flickr logo).

I've done my best to keep the output as clean and structured as possible, while still having the satisfying level of control for CSS and scripting. Replace "variable names" with actual values and multiply the li element with the specified number of images, and the example below should be something that resembles the output (line-breaks added for readability) that is added to the target container.

<ul class="flickrlist">
   <li>
      <a href="image.jpg" title="strImgLinkTitle" rel="lightbox[strLightbox]">
         <img class="photo" src="thumbnail.jpg" alt="strImgAlt" height="intThumbHeight" width="intThumbWidth" />
         </a>
      <div class="box">
         <a class="flickrlogo" href="flickrpage.html" rel="external" title="strFlickrLinkTitle">flick<span class="r">r</span></a>
         </div>
      </li>
   </ul>

The function has an option to specify a "set name" for use with a lightbox type script. It uses the de facto standard of tagging images to be used by the Lightbox with the rel attribute (rel="lightbox[setname]"). If you use a Lightbox with a different method for tagging images, it should be easy enough to modify the setAttribute() line into whatever format your script uses to identifiy images.

A final caveat; This method has an obvious shortcoming in that it lacks a proper fall-back for browsers/users surfing without javascript support. Depending on the way you'll be using it and your target audience, you should decide upon and implement a way of handling this properly.

That said; I've prepared a document that demonstrates the function. To take the hassle out of stealing it, all the required code is included inline in that document. This work is licensed under a Creative Commons License.

As always comments, suggestions and corrections are very much welcomed!

feedback

  1. Re: json-feed flickr badge

    • Hi there!
      Your flickr badge is simply great, I came across it after a long day on google...
      I'm making a photogallery for my personal website and I want to get my photos from flickr and show them with lytebox. Your script does that job!

      My only question is: I know there's a 20 pictures limit, due to the flickr API, but isn't it possible to call the script more than once in a page and to load pictures with different properties? For example it would be great to load 20 pictures with the tag "xyz" and then 20 different pictures with the tag "pqr".

      Thanks a lot in advance, of course I'm gonna thank you in the credits of my website!

      iacopo

    • Details:
      • Posted by
      • iacopo b
      • on the 1st of April 2010 at 18:52
Add your comment
Info

In addition to the comment itself, a name (preferably your real one) and either your email address or website is required. Line-breaks will be identified and encoded, html will simply be encoded as text.

Please read the blog commenting policy, you'll have to accept it before posting. Any information you decide to share will be treated with the respect it deserves, as such your email address etc will not be shared voluntarily with any third party.

 
Contact details
 
Comment
 
Control
 

Couldn't generate page, however a cached copy was found and served on the 1st of January 1970 @ 00:00 in 0.016 seconds...

Errors occurred while generating this page... (More info availible)