Flickr and Dojo Image Gallery

Posted by Shane O'Sullivan on 3 July, 2007

I have created an Image Gallery widget built on Dojo 0.4.3 that integrates nicely with Flickr. The widget it written entirely using JavaScript and CSS as a standalone Dojo widget, and is released under the same open source license as Dojo, the Academic Free License.

For more information, including the code and examples, see http://www.skynet.ie/~sos/ajax/imagegallery.php.

Some of the features of the widget include:

Pages of thumbnails.
Intelligent pre-loading of images so the images you are looking at are loaded first.
Fade effects for transitioning of images
Populated using JSON data - any JSON data, not just Flickr.
Flickr integration - remotely load your Flickr images.
Paging through a Flickr collection.
Slideshow

The widget can be instantiated from both HTML markup and programmatically in JavaScript.

To view your own Flickr pictures on the widget, without installing it on your own site, go to http://www.skynet.ie/~sos/ajax/yourpics.php .

There is a discussion thread in the Flickr API group at http://www.flickr.com/groups/api/discuss/72157600624623643.

So, why create this widget? Well, firstly I wanted a JavaScript image gallery that would list thumbnails and allow me to page through Flickr photos. Also, a slide show would have been nice. I was surprised to discover that I couldn’t find one that I liked in the twenty or so minutes I spent looking for one. I found a handy Flash based one, but I wanted a HTML and JavaScript only widget. So I grabbed Dojo 0.4.3 (my JavaScript library of choice right now) and wrote one.

Here is a screen shot:

The widget has all the features that I personally require at the moment, but will probably evolve as I think of new things to add. If you have any suggestions/bug reports, please comment on this post.

This entry was posted on 3 July, 2007 at 3:53 pm and is filed under Ajax, Dojo, Flickr, Image Gallery, Javascript, Technical, json. . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

9 Responses to “Flickr and Dojo Image Gallery”

schumi Says:
6 July, 2007 at 1:58 pm
Hello,

it is possible to choose a flickr set or take the script only all pictures from my account?

Thx,

schumi

p.s. Great Work!
Shane O'Sullivan Says:
6 July, 2007 at 2:49 pm
It’s not currently possible to choose a set, though I should be putting that in very soon.

As for your second question, I presume you are referring to whether or not you can use your private pictures - unfortunately it only works with public pictures for now.

Oh, and thanks

Shane
jigar shah Says:
20 July, 2007 at 11:45 pm
Hi, Nice pic. I m trying to modify the same to work with picasa webalbum api. Can you please help me ?
Shane O'Sullivan Says:
21 July, 2007 at 7:44 am
Sure. The code is already separated into two widgets:
- sos.widget.ImageGallery, which does all the basic stuff
- sos.widget.FlickrImageGallery, which extends ImageGallery, and adds methods to work with the Flickr API, as well as paging. Mostly what it does is translate the Flickr data to the more simplistic data structure that the ImageGallery widget understands.

So, for you to get it to work with Picasa web albums, copy what I did with the FlickrImageGallery widget, and modify it where necessary, calling it PicasaImageGallery or whatever.

Good luck with it. If you’d like to contribute it back, I’d be happy to add it to the code base and offer it on my site.

Thanks

Shane
Samridh Says:
2 August, 2007 at 11:31 am
Hi Shane,

First of all amazing work here! It really helped me in understanding DOJO concepts as well as REST architecture.

Now i was trying to build a similar client with which you can upload photographs to flickr, but was confused how to pass data to it.
Also how do I to implement my own REST service something like flickr which consumes messages with data in them ?

Any leads would be appreciated.

Thanks,

Sam
Image Gallery, Slideshow, and Flickr data source for Dojo 0.9 « SOS Says:
4 September, 2007 at 11:32 pm
[...] Posts Ubuntu on Thinkpad X41 - Installing the Beryl Window ManagerFlickr and Dojo Image GalleryGetting the selected ID from a Dojo ComboBox Dojo Charting example to show website statisticsVery [...]
Introducing the new Dojo Image Widgets « SOS Says:
13 October, 2007 at 11:09 am
[...] Top Posts Ubuntu on Thinkpad X41 - Installing the Beryl Window ManagerUbuntu on Thinkpad X41 - Enabling Thinkpad specific componentsFirst beta release of Dojo build toolInstalling Ubuntu Edgy on a Thinkpad X41 TabletDojo Charting example to show website statisticsUbuntu on Thinkpad X41 - Installing Multimedia ComponentsDojo Grid has landedUbuntu on Thinkpad X41 - Basic Installation InstructionsA TortoiseSVN replacement for UbuntuFlickr and Dojo Image Gallery [...]
christine Says:
8 April, 2008 at 1:03 am
Hi Shane, I’m testing out the gallery you wrote, using the new dojo 1.1 release. I like it a lot. I’d really like to be able to choose a set to display, though, and am wondering if you had implemented that part of it. (just referring back to your comment about eventually adding support for that).

Thanks,
Christine
Shane O'Sullivan Says:
8 April, 2008 at 8:54 am
Hi Christine,

I am still planning to add that functionality, and it’ll probably be in Dojo 1.2 Thanks for reminding me

Shane