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.
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt
SOS 
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!
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
Hi, Nice pic. I m trying to modify the same to work with picasa webalbum api. Can you please help me ?
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
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
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
Hi Christine,
I am still planning to add that functionality, and it’ll probably be in Dojo 1.2 Thanks for reminding me š
Shane
hi Shane, great work you have done..
I have one thing to ask though…
can you modify it? Instead of getting images from flicker can you get the images from a local directory?
I hope you can help me…
I really appreciate your work..
thanks Shane…
Hi Kent,
I later rewrote this widget to work with Dojo v1.0 and later. That version supports pluggable Dojo data stores, so that you can get your images from any data source at all – Flickr, Picasa, your own directories, wherever.
See my post at https://shaneosullivan.wordpress.com/2007/10/13/introducing-the-new-dojo-image-widgets for more information on this.
Hello. I wanted to know if you are still working on this application. I am trying to implement something like this into one of our websites, and cannot seem to find anything else like this.
Hi,
I updated it to work with Dojo v1.0, and in the process made it much better. See my post at https://shaneosullivan.wordpress.com/2007/10/13/introducing-the-new-dojo-image-widgets for more information.
Hello,
I try to use dojox.gallery (1.3b3) in a div with dojotype contentPane loading with setHRef function. The problem is that no thumbnails are generated, all images are large.
Do you have an idea ?
Thanks
Hi Jean-Pascal,
Are you including the correct CSS on the page? You need to make sure that dojox/image/resources/image.css is included on the page.
If you are doing that correctly, and it’s still not working, can you please put a full sample HTML page on the web for me to look at?
thanks
Shane
Hi,
Love the program, want to use it for a client’s site (he’s a auto customizing shop) but I need to put each job separate (i.e. Harley, Limo, Ricer, 57 Chevy). If that’s possible it would be perfect for what I’m doing. Can’t think of any other features I would need.
Hi Ted,
I’m not sure what you mean by “put each job separate”. Do you mean have multiple Galleries on a page? That is of course possible.
Shane
Hello Shane.
As all have mentioned, GREAT Work!!! š
I, like many before, would love to select our images from Flickr by Set, any news on that?
Many thanks
What I meant was have each car on it’s own page, so the client can upload his pictures to Flickr,and then the web site can grab them.
@Andrew, thanks a lot. It is possible to select photos from a single users stream based on the set id. In your request to the FlickrRestStore, specify the the “setid” parameter, which you can get from the URL of the set.
For example, in the following url:
the “setid” is the last number.
Shane
PERFECT!!!!!
That’s great Shane that’s for that š
This works realy well now.
Do you have any idea why IE6 chops the Lightbox image in half?
Or why the control button in IE8 are only clickable on 1px?
The really wierd thing is that I had Lightbox working in IE6 on this site: http://pandpwindows.com/picturegallery.html click on the thumbnails(really bad design, pls don’t laugh).
Although wen I tried the same code on this site: http://www.karateeastkent.co.uk/html/lbtestflkek.html (please find he Show flickr lightbox button (bad box model)) this loses half the image?
I’m really greatful for any help you can give me š
Thanks again
Andrew
Good one, galleries can be useful at times especially for projects etc
Thanks for posting them š
The people behind Flickr are crazy about creating new ways of organizing photos and video and making it easy for users to organize and store their precious digital memories. As a user, you can allow all your contacts and friends to comment on your photos and even reorganize them.
Usually I don’t read article on blogs, but I would like to say that this write-up very forced me to
check out and do it! Your writing taste has been amazed me.
Thanks, quite nice post.
It’s hard to find educated people for this subject, however, you sound like you know what you’re talking about!
Thanks