...or; A flexible and unobtrusive flickr js-badge
Although 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.
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
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).
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.
<a href="image.jpg" title="strImgLinkTitle" rel="lightbox[strLightbox]">
<img class="photo" src="thumbnail.jpg" alt="strImgAlt" height="intThumbHeight" width="intThumbWidth" />
<a class="flickrlogo" href="flickrpage.html" rel="external" title="strFlickrLinkTitle">flick<span class="r">r</span></a>
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.
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!
- on the 12th of December 2007 @ 22:04
- in Code the web : Scripting
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!
- Posted by
- on the 1st of April 2010 at 18:52