Introducing the new Dojo Image Widgets
Posted by Shane O'Sullivan on 13 October, 2007
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:
- Have a look at the test pages for the widgets:
- Test page for ThumbnailPicker
- Test page for SlideShow
- Test page for Gallery
- Demo page for dojox.data.FlickrRestStore
- The Gallery on my personal website - example of using the widget hosted on your own server
- The Gallery on another website - example of using the widget hosted on AOL’s cross domain CDN network.
- Demo page for all DojoX Image widgets
- Read the documentation (I know!! Documentation… in Dojo!!)
- Download the latest nightly archive from Dojo.
- Check out the code from the Subversion repository.
- Wait for Dojo 1.0 to come out (end of Oct 2007) and download the full release from the main Dojo website.
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
13 October, 2007 at 2:31 pm
Waoo, looks very nice ! Going to try it soon.
13 October, 2007 at 2:37 pm
Thanks for your contribution !!
13 October, 2007 at 3:56 pm
You’re very welcome, hope you enjoy it.
14 October, 2007 at 1:56 pm
Many links are broken.
14 October, 2007 at 6:00 pm
Yes, some of the links point to the nightly build of Dojo, which seems to have failed last night. I’ll change them so that they point to the build that succeeded
14 October, 2007 at 10:53 pm
Hey Shane,
I just made a set of buttons which fit quite nicely:
http://nikolaionken.com/dojo/images/gallery.gif or
http://nikolaionken.com/dojo/images/gallery.png
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
15 October, 2007 at 12:06 am
Nikolai: those icons look great!
15 October, 2007 at 8:26 am
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.
15 October, 2007 at 9:05 am
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.
15 October, 2007 at 9:07 am
Excellent, thanks for that. Enjoy your holiday!
15 October, 2007 at 5:21 pm
Excellent work Shane!
15 October, 2007 at 6:45 pm
[...] the weekend Shane O’Sullivan released version 1.0 of Dojo Image Widgets, a set of Dojo widgets that allows easy creation of image galleries from Flickr. One of the [...]
16 October, 2007 at 4:08 am
[...] Introducing the new Dojo Image Widgets In previous posts (here for the Dojo 0.4.3 version, here and here), I wrote how I wrote an [...]
16 October, 2007 at 2:48 pm
Thanks Dylan
16 October, 2007 at 7:24 pm
Awesome work Shane, and I cant wait to see the new icons integrated from Nikolai.
-Karl
16 October, 2007 at 10:07 pm
just uploaded a new ‘version’ with a few button changes… they are totally out of alignment - sorry for that!!
http://www.nikolaionken.com/dojo/images/dojo-nihilo_01.png
Please let me know what you think,
nikolai
16 October, 2007 at 10:35 pm
Nikolai, they look great. We’ll get them integrated as soon as possible. Can you provide us with a png of just the buttons?
Thanks a lot for this,
Shane
16 October, 2007 at 11:26 pm
[...] Introducing the new Dojo Image Widgets « SOS (tags: dojo image gallery) [...]
17 October, 2007 at 8:40 am
http://www.nikolaionken.com/dojo/images/images.zip
I put them in seperate pngs so you would have to create one large as you did in the current version.
Curious to see it in action!!
30 October, 2007 at 7:50 pm
Nikolai,
I’m happy to say that the images have been incorporated in the widget’s default theme. It looks much better than before, thanks very much.
Shane
3 November, 2007 at 6:25 am
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
3 November, 2007 at 11:21 am
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
4 November, 2007 at 9:24 am
Okay, thanks for the tip on how to log in to trac. I knew I had read it somewhere, but couldn’t find it.
5 January, 2008 at 6:00 pm
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
6 January, 2008 at 12:38 pm
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
9 January, 2008 at 4:54 am
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,
9 January, 2008 at 11:14 am
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
14 January, 2008 at 6:32 pm
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
14 January, 2008 at 6:37 pm
Hi Max,
I’m not sure what you mean in your description of the problem. Could you put an example usage on the web for me to look at?
Thanks
Shane
14 January, 2008 at 9:15 pm
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
14 January, 2008 at 9:31 pm
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
19 January, 2008 at 4:41 pm
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
19 January, 2008 at 4:51 pm
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
19 January, 2008 at 5:04 pm
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
19 January, 2008 at 5:15 pm
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
19 January, 2008 at 6:49 pm
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?
19 January, 2008 at 7:00 pm
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
19 January, 2008 at 7:41 pm
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
19 January, 2008 at 11:44 pm
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));
}
20 January, 2008 at 12:42 am
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)
20 January, 2008 at 8:58 am
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
26 January, 2008 at 5:44 pm
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
26 January, 2008 at 5:58 pm
Hi Max,
Did you copy the entire zip of all required files from http://www.skynet.ie/~sos/ajax/sos_ajax.zip ? You may have not downloaded the CSS or HTML templates. Can you put a sample page on the web for me to have a look at?
Thanks
Shane
26 January, 2008 at 6:14 pm
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
26 January, 2008 at 7:16 pm
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
26 January, 2008 at 7:19 pm
the strange thing is that the same code works without problems with explorer 6, firefox and safari