[You can download the Flickr stream browser greasemonkey script here.]

I’ve been a fan of Flickr since the day I discovered it. I was impressed by the active user community and how it was growing so quickly. I was impressed by the deceptively simple interface. I was impressed by this whole “tagging” thing, and I was certainly impressed by all the colorful pictures. But most of all, I was impressed by way that the Flickr staff actively sought out and effectively implemented user ideas.

I recently had what I thought was a bright idea and I posted it in the Flickr Ideas forum where I was happy to see that the Flickr staff agreed with me. What I proposed was that they make the little dual icon stream/pool/set browsers on the right side of the screen more dynamic. To me it seemed like the ideal place for a little AJAX magic. This was over a month ago and the Flickr developers are clearly quite busy (perhaps they should hire a few new UI developers, nudge nudge wink wink). In the mean time, I’ve written my first Greasemonkey script to make this happen for everyone using Firefox today.

After installing my script, clicking on the thumbnail image does as is expected and goes to the larger version of that image. But, clicking on the “< prev ” or “next >” text underneath “scrolls” into the stream and just shows you the next thumbnail in that direction. This is done using AJAX and the Flickr API to get the thumbnail without reloading the page or displaying a larger image. So, you can look around in the stream, set or pool while only loading very small images. When you see one that really looks interesting, you click on it to view the larger size.

I think this will be a huge help to those people still stuck on dial up connections, but even for the rest of us this could really make the Flickr interface more responsive. It will also have the nice side effect of saving Flickr a lot on the bandwith bill.

The script is pretty straightforward. The Flickr API gives us all the functions we need to make this happen. First, a call is made to the appropriate context function to find out what the photo id for the previous or next image is. Once that photo id is obtained, a call is made to the getSizes function to get the url for the square thumbnail image.

The most difficult part, especially with this being my first Greasemonkey script, was hooking into the right elements in the DOM to find the right images to modify. It took quite a bit of tinkering, but eventually I found a combination that seems to work consistently.

A few remaining issues:

1. The script only works for the one active stream box that is open when the page loads. So, if you click on “+” to expand another box you won’t be able to use the new functionality until you’ve loaded one larger image first.
2. The script isn’t active if you are at the first or last image in the stream. Without two image placeholders to work with, things became a bit hairy. Perhaps in the next release I will find a slick way to do this. .

[You can download the Flickr stream browser greasemonkey script here.]

I can’t wait for Flickr to integrate this into the interface directly. Surely their implementation will be more elegant. But in the mean time I think this is an effective implementation that many people might find useful.

Comments and suggestions are welcome! If you have any ideas for further improving the script, please let me know. If you find any bugs, please let me know as well. Thanks!

Update 1/15/2006: Flickr has baked this into the site, so there’s really no more need for this script

This entry was posted on Tuesday, June 28th, 2005 at 7:18 am and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.