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.
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:
- 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.
- 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
July 1st, 2005 at 12:38 pm
I love this! Thanks so much!
July 6th, 2005 at 2:23 pm
hmm, not working for me
with greasemonkey 2.0.6
are still just loading the respective picture
July 6th, 2005 at 7:02 pm
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.
July 7th, 2005 at 6:59 am
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.
July 31st, 2005 at 5:45 pm
it was my greasemonkey version, i guess
October 3rd, 2005 at 4:48 pm
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.
January 12th, 2006 at 7:48 am
[…] 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 […]
October 12th, 2007 at 3:21 pm
[…] and “next >” underneath thumbnails to load the next thumbnail dynamically. More Added […]