SOS

Shane O'Sullivan's technical blog… really ties the room together

Flickr and Dojo Image Gallery

Posted by Shane O'Sullivan on July 3, 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:


Screenshot

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

About these ads

24 Responses to “Flickr and Dojo Image Gallery”

  1. schumi said

    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!

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

  3. jigar shah said

    Hi, Nice pic. I m trying to modify the same to work with picasa webalbum api. Can you please help me ?

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

  5. Samridh said

    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

  6. […] 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 […]

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

  8. christine said

    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

  9. Hi Christine,

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

    Shane

  10. kent said

    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…

  11. 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 http://shaneosullivan.wordpress.com/2007/10/13/introducing-the-new-dojo-image-widgets for more information on this.

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

  13. Hi,

    I updated it to work with Dojo v1.0, and in the process made it much better. See my post at http://shaneosullivan.wordpress.com/2007/10/13/introducing-the-new-dojo-image-widgets for more information.

  14. Jean-Pascal Laux said

    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

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

  16. Ted Stoffers said

    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.

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

  18. Andrew McCann said

    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

  19. Ted Stoffers said

    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.

  20. @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:

    http://www.flickr.com/photos/shaneosullivan/sets/72157616348710627/

    the “setid” is the last number.

    Shane

  21. Andrew McCann said

    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

  22. Good one, galleries can be useful at times especially for projects etc

    Thanks for posting them :)

  23. Briana Mathie said

    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.

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 533 other followers

%d bloggers like this: