Improving the Flickr experience

[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.

Flickr Steam Browser Example

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

8 Responses to “Improving the Flickr experience”

  1. John R Says:

    I love this! Thanks so much!

  2. gon Says:

    hmm, not working for me
    with greasemonkey 2.0.6

    are still just loading the respective picture

  3. Udi Says:

    gon, are you clicking on the “< prev” and “next >” text underneath the thumbnail and not on the thumbnail itself? Can you provide a link to a page on flickr that you’re testing with? Thanks.

  4. Udi Says:

    Version 0.2 has been released. The script now retreives the previous and next thumbnail ahead of time and caches it off screen. This means even faster loading.

    You can download it in the same place as before.

  5. gon Says:

    it was my greasemonkey version, i guess

  6. Bod Says:

    Hi, nice idea actually !
    I just tried it but I think I can explain why I got this error.
    When displaying the first photo, it’s ok and I click on “next”.
    The next image loads, then I get twice a popup window displaying the error message “Photo not found” (I guess that’s twice because one is for “prev”, and the other is for “next”). And “prev” and “next” are not displayed.
    I tried it at work and we use a proxy server requiring authentication. I think that’s the caveat.

  7. Udi’s Spot » Archive » My Flickr Greasemonkey script is now useless Says:

    […] mp right to the correct page in the photo stream for the photo you’re viewing. More info on my greasemonkey script Flickr’s announcement on the new fea […]

  8. GreaseMonkey : Flick’r Scri at Artistik Intelligence Agency Says:

    […] and “next >” underneath thumbnails to load the next thumbnail dynamically. More Added […]