Introducing the new Dojo Image Widgets

Ajax, aol, cross domain, dijit, Dojo, dojo.data, dojox, dojox.data, dojox.image, Flickr, Image Gallery, Javascript, json, open source, Technical 3 Minutes

In previous posts (here for the Dojo 0.4.3 version, here and here), I wrote how I wrote an image gallery for version 0.4.3 of the Dojo Ajax Toolkit, and how I was translating it for the latest version of the toolkit, version 1.0.

Well, that work is now, finally, complete, and I have to say, I’m pretty damn happy with the results. The code is now part of the dojox.image project (dojox is the Dojo extensions project, for cool new code that may in the future make it into the core code base if enough people like/want it).

If you’d like to just see the gallery in action, have a look at the Photos page on my personal website, or see the links at the bottom of the post, otherwise, read on!

Update: changes have been made to the widgets since this post was written, resulting in some badly aligned images. This will be fixed in the next few days. (Oct 25th 2007)

Update: issue above has been fixed (Oct 29th 2007)

All For One….

The gallery is composed of three widgets:

  • dojox.image.ThumbnailPicker – a widget to list many small images in either a horizontal or vertical orientation, scroll through them, and attach click events that other widgets can listen to
  • dojox.image.SlideShow – a widget that displays one image at a time, and can run a slideshow, changing the images every ‘x’ seconds.
  • dojox.image.Gallery – A wrapper around the ThumbnailPicker, and SlideShow widgets.

Both the ThumbnailPicker and Slideshow widgets can also be used on their own, and have no dependencies on each other.

Dojo Data Is Too Cool for School

One of the coolest features of all of these widgets is that they all feed off image data provided by the dojo.data API. What this basically means is that each widget can display images from any source, with no modification whatsoever. You simply pass it a Dojo data store, and is shows the pictures. Some of the data stores currently in the Dojo toolkit include:

  • dojo.data.ItemFileReadStore – pull in simple JSON data in an array. You could use this if you simply have a directory of images on your own web server you would like to display
  • dojox.data.FlickrRestStore (demo) – query the Flickr photo sharing website for images. This is all done on the browser, with no need for any server-side redirects. This is another of my additions to the Dojo toolkit – I love Flickr, feel free to check out my photo stream here. I previously wrote another blog post on this data store here.
  • dojox.data.PicasaStore (demo) – query Google’s Picasa image sharing website for images. As with the Flickr data store, this is done on the browser, with no need for server side support.

and many more….. You can also write your own data store if you so desire, but the ones included in the toolkit should cover almost everything you might need.

Gimme, Gimme, Gimme!

So, how can I get this, you ask! Well, you can:

Update: Dojo 1.0 is now released. Get it at http://www.dojotoolkit.org/downloads
As always, any and all feedback is welcome. Also, a big thanks to Peter Higgins, owner of the dojox.image project, and Jared Jurkiewicz, owner of the dojo.data project, for all their helpful ideas, and for reviewing/committing my code to the Dojo project.
Share this post:digg it|kick it|Email it|bookmark it|reddit|liveIt

Published by Shane O'Sullivan

I am a software engineer and manager from Ireland. I spent 7 years working in Ireland from 2003 – 2010, then ten years in Silicon Valley from 2010 to 2020. In California I spent about 6.5 years at Facebook Engineering, the last three of which I was an engineering manager in the Ads organisation focusing on customer facing products for creating and managing ads. At Stripe I built the Developer Productivity organisation, with teams that were responsible for the use of the Ruby language, testing infrastructure, documentation, developer tooling (e.g. IDE integrations) and more. At Promise, I was Head of Engineering from 2018 – 2020, responsible for building the first few iterations of our products, hiring for all product roles, meeting with clients and investors, and anything else needed to get a tiny startup bootstrapped and successful. Now I’m back in Ireland, working on my next company. Coming soon (as of early 2023!). This blog contains my various musings on all things technical/interesting on the interweb and beyond.

Published

78 thoughts on “Introducing the new Dojo Image Widgets”

  6. Hey Shane,

    I just made a set of buttons which fit quite nicely:
    http://nikolaionken.com/dojo/images/gallery.gif or

    Let me know if you need the photoshop file (I didn’t align the images completely so they get cut off)..
    I also suggest either to put the player controls underneath the image or use png (in my case you get funky borders with the gif).

    I signed a dojo cla some time ago so all should be fine if you decide to use the icons.

    Nikolai

    Reply

  8. Nikolai, those icons are brilliant. I never claimed to be any kind of artist, so I must admit, mine are pretty rough. I’ll see about integrating them. If you’d like to do up alternate icons for the different themes, I could put them in as well.

    Reply

  9. I’ll do that once I am back in Amsterdam – in Israel on a vacation now 🙂
    also noticed that the play and stop button I made need a little more contrast from the other controls.

    Reply
  12. Pingback: Javascript News » Blog Archive » Dojo Image Widgets v1.0
  13. Pingback: Top Posts « WordPress.com

  16. just uploaded a new ‘version’ with a few button changes… they are totally out of alignment – sorry for that!!

    Please let me know what you think,

    nikolai

    Reply
  18. Pingback: links for 2007-10-16 at Travels and Travails

  21. Nice work.

    I found a bug and can’t sort out how to file in Trac so please excuse submitting it here.

    On line 234 of SlideShow.js (http://trac.dojotoolkit.org/browser/dojox/trunk/image/SlideShow.js#L234), you should reset the index to -1, or else the first image isn’t shown, as in

    234 if(inTimer && (this.loop || forceLoop)){ this.imageIndex = -1; }

    because when you show the image, you add one:

    240 var _this = this;
    241 this.showImage(this.imageIndex + 1, function(){

    Also, I’ve been hacking on it and would like to suggest allowing both a title and some content (say a field ‘content’) for an image, with the content defaulting to the title if blank, and vice versa. I use both a title and some arbitrary block of text to describe what is going on, but sometimes I have one or the other, and sometimes I have neither, of course.

    Again, good work on this.
    James

    Reply

  22. Hi James,

    Thanks for pointing that out. I’ve filed a ticket at http://trac.dojotoolkit.org/ticket/5002 for this, along with a patch for it.

    For future reference, when logging bugs at trac.dojotoolkit.org, you have to log in as guest/guest. This is to stop spam messing with the system. Also, if you want to assign a bug to me, assign it to sos, or to dante, who owns a lot of DojoX.

    Thanks for the work

    Shane

    Reply

  23. Okay, thanks for the tip on how to log in to trac. I knew I had read it somewhere, but couldn’t find it.

    Reply

  24. the gallery is amazing but i have noticed a problem of incompatibility in safari 3.0, when i try to display the gallery some thumbnails are placed non correctly

    Reply

  25. Hi Max,

    Unfortunately I have not tested it on Safari, mostly just for IE and FF. I might get around to installing Safari (though at work since I work on Ubuntu at home), but if anyone else would like to have a stab at fixing the problem, please let me know. It should just be a CSS bug.

    Thanks

    Shane

    Reply

  26. hello,

    I feel really stupid, but i really don’t understand how to make all of this work. I have a website http://www.hec.ca/abc, and i want to put a gallery from my picasa rss feed. I have been searching on the web for the past 8 hours before landing on your page, but it seems a little bit complicated all this dojo things.

    Could you please refer me to a page for easy understanding?

    Thanks,

    ilias,

    Reply

  27. Hi Iliasbenjelloun,

    I’ve looked into the dojox.data.PicasaStore code, and it seems to have problems retrieving a single users photos. While you can use it to search for photos that match a given tag, it cannot retrieve a single users photos, or an album. I’ll contact the author about this

    Shane

    Reply

  28. Hi Shane O’Sullivan, according to the analysis of Dreamweaver CS3 the problem must be inside the CSS used for the image gallery; however i want to know how can i solve a little bug encounterd in the version compatible with dojo 0.4.3.
    When i try to use the slideshow with the photos of the first part of each page (first excluded), the slideshow mode doesn’t start, I don’t understand why; this anomaly doesn’t affect the photos in other part of the pages. if you can please give me some suggestions

    P.S.
    I’m using this version, and not the last one, for accessibility reasons, especially for the distribution of the photos in more than one page

    Reply

  30. try to visualize the example 1 in your web site with the browser’s cache empty, then try to use the slideshow mode with the third image as starting point. when i have tried the slideshow mode doesn’t start

    Reply

  31. Hi Max,

    Thanks a lot for pointing that out. It’s fixed now – the problem was that a variable was a string instead of a number, therefore adding one to it turned it from “2” into “21” instead of the number 3.

    Shane

    Reply

  32. Hi Shane and sorry for my insistence, could you tell me which methods the prev and the next arrows call in order to switch from a series of thumbs to another? I have taken a look in your code and i think that the methods are called in the row 126 but i’m not sure

    thanks

    Reply

  33. Hi Max,

    The arrows in the ThumbnailPicker (to top row of images) call the navNext and navPrev functions on the wrapped ThumbnailPicker widget.

    The arrows in the SlideShow widget call the navNext and navPrev functions on the wrapped SlideShow widget.

    Shane

    Reply

  34. I’m sorry Shane but the question reguards tha 0.4.3 version and not the last one, i have forgotten this particular in my previous messagge but

    sorry again

    Reply

  35. Hi Max,

    No problem. Look at the following code:

    dojo.event.browser.addListener(this.thumbCells[0], “onclick”, function(evt){
    thisWidget.showThumbs(thisWidget.thumbIndex – thisWidget.numberThumbs);
    });
    dojo.event.browser.addListener(this.thumbCells[this.numberThumbs + 1], “onclick”, function(evt){
    thisWidget.showThumbs(thisWidget.thumbIndex + thisWidget.numberThumbs);
    });

    This is from the widget. The showThumbs function is called when the navigation arrows are clicked.

    Shane

    Reply

  36. Hi Shane I want to switch automatically, as you have made in the last verson of the widget, form the current thumbs to the next and i have thought to add this instructions

    if (((pos+1)%this.numberThumbs)==1){
    thisWidget.showThumbs(thisWidget.thumbIndex – thisWidget.numberThumbs);}

    in this way when the photo displayed is the first of the next series it should execute the method of the next arrow.
    unfortunately i have tried to put this code in many places but it seems not working.
    could you please help me?

    Reply

  37. You mean that when you move the thumbnails, you automatically want the first one to be displayed as the big image?

    If so:
    Search for the showNodes() function – it’s an internal function defined in the showThumbs() function.

    At the end of the function, put the line:
    thisWidget.showImage(idx);

    That should work I think

    Shane

    Reply

  38. no Shane i’m refering to the possibility of change the set of thumbnails when the slideshow mode displays a picture different from the thumbnails displayed

    Reply

  39. In that case, in the showOrLoadIt() function, at the end of the ‘if’ statement (not the ‘else’ part), put the following code:

    if(index > thisWidget.thumbIndex + thisWidget.numberThumbs) {
    thisWidget.showThumbs(index);
    } else if (index < thisWidget.thumbIndex) {
    thisWidget.showThumbs(Math.min(index, thisWidget.thumbIndex – thisWidget.numberThumbs));
    }

    Reply

  40. Hi Shane, i don’t know what to say, for this reason i say thanks from me and the other two persons who are working with me in the development of the site.
    that code is amazing and your widget too

    thanks, really

    Max

    P.S.

    if(index > thisWidget.thumbIndex + thisWidget.numberThumbs -1)

    Reply

  41. Hi Max

    You’re very welcome 🙂 It’d be cool if you could post the URL of the site your writing when it’s finished (if it’s public that is). It’s always nice to see my code in actual use somewhere.

    Shane

    Reply

  42. Hi shane, i don’t understand why i can’t display your imagegallery (the 0.4.3 version), built in a local html file, with Explorer 7.
    the example 1 on your web site works perfectly with explorer 7 and i have tried to use your remote files of dojo and imagegallery but nothing.
    Could you tell me the reason of this phenomenon?

    thanks

    Max

    Reply

  44. Hi Shane, maybe i found the problem, i think that the widget folder that it was unable to find was the widget folder inside the src folder.
    I said maybe because i have tried on Explorer 6 and the first time it gives me the same problem, i have found the right dojo folder and now it works, i will try again on explorer 7

    thanks

    Max

    Reply

  45. Hi Shane, I have tried to substitute again the reference of the libraries (your references), this time no errors were found but the page is empty, if you want an example my page was built extracting the code from the example 1

    Reply

  47. sorry, but none of the slideshows work anymore. Neither the slidshow widget itsself nor the slideshow in the gallery windget neither in FireFox 2 nor in IE 7.

    Reply

  48. hi Wilson

    What version are you using? There were some issues between v1.1 and 1.2 but those are fixed now.
    I’ve tested using the nightlies on ff2 and IE7 and it works fine.

    Do you have some example code?

    Reply

  49. If anyone’s looking for more examples of this in action, we’re now using a couple of these Dojo Image Galleries on the Ace of Clubs site. We started with Dojo 1.1 and have just recently upgraded to 1.2.

    Reply

  50. Really great stuff. Really appreciate the work in both the code and the documentation.

    I’ve been messing with the ThumbnailPicker with the FlicrRestStore, with mostly good success – but two issues:

    First – is there a way to grab the photos of an entire group using this tool? The grabbing stuff by userid, or by tag is great, but how about when you want to return all the photos in a Flickr group – regardless of user or tag. I was hoping there was something as simple as groupid: xxxx

    Second – I note that you explicitly say it works in FF2, but don’t see a word about FF3. I am having issues with the dojo 1.2.1 thumbnailPicker in FF3 – wondering if it is me, or something with the widget. The widget looks as if it loads fine, but you cannot roll through the photos

    Thanks for any info

    Reply

  51. Hi Tom,

    The FlickrRestStore currently does not support groups, though of course it could. You should open a ticket at bugs.dojotoolkit.org , username/password is guest/guest, and assign it to shaneosullivan

    I may get time to upgrade it over the next few weeks.

    The ThumbnailPicker had some issues in 1.1, but these were fixed for 1.2. Could you post an example where it fails? Preferably open a ticket and attach a HTML file with an example of the failure

    Thanks

    Shane

    Reply

  52. Shane, great gallery! Would you be able to tell me how or where I could find info on grabbing local images instead of using Flckr? I would just like to grab the images I have on my local host and the example I did find didnt help.

    Thanks!
    Murray

    Reply

  54. Shane,

    Thanks that worked great I really appreciate! So where would I look if I wanted to find a work around for the stack overflow bug in IE6 using dojo 1.1.1? Do you think its possible with that version of the toolkit?

    Thanks again, great job

    -Murray

    Reply

  55. Hello Shane,

    I am currently working on integrating your widget with a new layout i am developing, and i sort of have the feeling that some new functionality would make a great addition, if you happen to have the time.

    In particular, i am planning to work with fullscreen images, which happens to have become a bit of a trend nowadays in the design world.

    I’ve been trying to get your gallery to correctly display images, as would happen with when i set them manually in a div with position: fixed and left&top to 0, but i’m somewhat failing to get what i need.

    Specifically, i’d have the following requests for features:

    -1) just like a SlideContainer widget has a SlideController widget , could your slideshow also have an external slidecontroller [ie, in a separate div,widget, etc]? Functions to have, are basically the same [play/stop, previous, next]

    -2) could it be possible to make it so, that if i view an image which is too large for the viewport, it gets scaled dynamically [depending on the viewport size] to constantly fully display either the full width or the full height? [maintaining aspect ratio]. Nice feauture for fullscreen visualisation of images.

    -3) perhaps simply add a “fullscreen” mode, in which no padding, no border, and 100% size in all directions is used

    Thanks for reading!

    david

    Reply

  56. Hi David,

    These are all very good suggestions. However, I may not have time to implement them in the near future. You should file a ticket for them at bugs.dojotoolkit.org . If you have time yourself, we would welcome any additions you would like to submit.

    You would need to submit a CLA (http://dojofoundation.org/about/cla/) first, but it’s a simple process and you’d have the distinction of being a Dojo contributor!

    Shane

    Reply

  57. Hi Shane,

    I’m a dojo noob so excuse my temerity, but Ive been playing with the slideshow widget recently and came across an image re-sizing problem with images that are too big in both dimensions. I took the liberty of replacing the _fitImage function to work like my old PHP resizer. It seems to work, and if you want it, here it is …


    _fitImage: function(img) {
    // summary: Ensures that the image width and height do not exceed the maximum.
    // img: Node
    // The image DOM node to optionally resize

    var width = img.width;
    var height = img.height;

    var xFactor = width/this.imageWidth;
    var yFactor = height/this.imageHeight;

    // Choose to use largest reduction factor to keep image recognisable
    if (xFactor >= yFactor) {
    img.width = this.imageWidth;
    img.height = height/xFactor;
    } else {
    img.height = this.imageHeight;
    img.width = width/yFactor;
    }
    },

    Now I’m off to play with the Thumbnail and Gallery widgets too ….

    Reply

  58. Oops .. forgot to mention there’s a side effect with the above method – The dimensions will be scaled down OR UP to match one of the imageHeight/imageWidth sizes. If that’s not required, it’s a simple fix to the if statement to check whether xFactor and yFactor are both <= 1 – if so do nothing.

    Reply

  60. Shane,

    I modified the routine to use a new boolean property ‘scaleUp’ which permits the calling script to tell Slideshow if it wants smaller than default images scaled up, or left as they are. I also got tempted and submitted a CLA. Since I’m committed to a large project using Dojo/Zend I may as well contribute if I make any local changes etc. Anyway – heres a newer version of the above :


    _fitImage: function(img) {
    // summary: Ensures that the image width and height do not exceed the maximum.
    // If scaleUp is set to true, then smaller images will be scaled up to fir the
    // first default dimension be it width or height.
    // img: Node
    // The image DOM node to optionally resize
    var width = img.width;
    var height = img.height;

    var xFactor = width/this.imageWidth;
    var yFactor = height/this.imageHeight;

    // Choose to use largest reduction factor to keep image recognisable

    if ((xFactor >= yFactor) && ((xFactor > 1) || (this.scaleUp))) {
    img.width = this.imageWidth;
    img.height = height/xFactor;
    } else if(yFactor > 1 || (this.scaleUp)) {
    img.height = this.imageHeight;
    img.width = width/yFactor;
    }
    },

    Reply

  61. Hi Shane,
    I have downloaded and implemented Image_Gallery example from your site..

    Can I get Javascript file which has the logic ?? Because I wanted to modify the gallery shape from horizontal to vertical.

    Thanks,
    Raj.

    Reply

  63. Hi Shane,
    How do I access thumbnails which are in my local machine (C:\images\a.jpg) instead of using through website?

    Thanks,
    Raj.

    Reply

  64. Hi raj

    You simply create an ItemReadStore which contains the paths to your local files,
    Then just copy the code in the test pages. Look at the sample data
    files to see how to format the data

    Reply

  65. Hi Shane,
    I have created store with local files and it worked fine.

    If I want to access the images from webserver..how do I do that?? e.g path is /images/colors/sample.jpg.If I create store with the path like this (/images/colors/sample.jpg)..would it work??

    Thanks,
    Raj.

    Reply

  66. Hi Raj,

    Are you asking how files that are on your local hard drive can be accessed from the web? If so, then you need to be running a web server on your machine, and those files need to accessible to that web server.

    Otherwise, you have to upload those files to somewhere on the web, either to your hosted site, or to another site such as Flickr or Photobucket, then change the data store to point to those

    Shane

    Reply

  67. Hi Shane,
    I am creating store dynamically from xml string where thumbnail images are residing in webserver and path is like “/mywebsite/images/colors/sample.jpg”. So if I use same path in store also then would these images render properly or do I need to concatenate with server name like “http://webserver/”??

    My application is based on websphere portals for your reference.

    Thanks,
    Raj.

    Reply

  68. Hi Raj,

    You can of course use a relative path (relative to the page, like ../../folder/img.png), or an absolute path from the root of your webserver. You do not have to include the web server url. This is basic web stuff, just like if you were writing a simple html page with some pictures on it

    Shane

    Reply

  69. Hi Shane,
    I am using “parseOnLoad: true” for parsing “thumbnail picker ” widget. It is working fine when first time page loads..but its failing when I refresh browser.

    How do I make sure that widget will be parsed and painted for every browser refresh??

    Thanks,
    Raj.

    Reply

  71. Hi Shane

    i got a problem with dojox.image.gallery using ItemDataStore, apparently there are some programmer having the same problem, can you please check this site

    Thank You

    Reply
  73. Pingback: rental properites Sydney
  74. Pingback: Kia in South Africa
  75. Pingback: Test PKV
  76. Pingback: amsterdam Art events

Leave a reply to Test PKV Cancel reply