Tuesday, January 20th, 2009

Dojo Zoomer – Sweet Image Cropping Widget

Category: Dojo

I love projects that evolve from minor functionality to full-blown apps, especially with the help of a strong community like Dojo users. This is precisely what happened to Peter Higgins:

Dojo Zoomer

began as a simple Drag and Drop / Constrained Mover example, and with the help of a couple #dojo community members took shape into a fully featured demo showing the power of the Dojo Toolkit.

By hovering over the image on the left panel, a cropper panel appears which dynamically displays the cropped portion of the image on the right-hand panel, allowing you to focus explicitly on the portion of the main image that interests you. Certainly an appealing capability for many sites including online retailers and photo management hubs such as SmugMug or Flickr.

The component extends from Dojo’s Dijit library making it extremely customizable.

Honestly though, the best part of this widget is how so many members of the Dojo community jumped in to enhance the initial demo to its current state and produce a widget which is immediately usable for many purposes.

Thanks be to mi hermana, Allison Wildman, for contributing all the beautiful imagery, Ben and Nic for coming through on the advanced math and coordinate calculation, and thanks to Dojo for providing such out of the box components as a dnd.parentConstrainedMoveable and dojox.widget.ResizeHandle, making this exercise simply one of wiring the parts together and supplying images.

Posted by Rey Bango at 10:52 am
7 Comments

++++-
4.2 rating from 40 votes

7 Comments »

Comments feed TrackBack URI

Very cool!

Surprised that nobody is as excited, as I see no comments!

Comment by ragjunk — January 20, 2009

I’m not excited – an image cropper been done before, on Prototype, two years ago:

http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

Comment by Diodeus — January 20, 2009

Yeah, I don’t really think they are the same. This isn’t really a cropper, rather it provides a great way of zooming larger images.

The Prototype example posted reminds me of jCrop (http://deepliquid.com/content/Jcrop.html) which is more suited to actually cropping images, by providing an interface similar to what you would find in Photoshop.

Comment by Jonny — January 20, 2009

I see a lot of zoomer and cropper in mootools or jquery, better than this…
Nnzio Fiore

Comment by nunziofiore — January 22, 2009

Yes this isn’t a unique bit of functionality generally speaking but it is a new component built for the Dojo community and I felt that it was valuable to them.

Comment by Rey Bango — January 22, 2009

@rey / @nunziofiore – no this isn’t anything new, I agree. What it is, however, is a normal example of a bunch of reusable Dijit components, a small core framework (Dojo), a modular development model, an entirely progressive use of Dojo (which many seem to believe to be an impossibility.), and you receive bonus points for the fact compressing the css and js for this demo (or any app) down to a few files (dojo.js 27k, src.js 23k, demo.css < 1k) is an automated process, and shipped out of the box.
.
Additionally, the code living in the Dojo repositories means it is entirely free/clean/clear of any IP issues or licensing snafus, unlike the above linked (or similar) commercial alternatives.

Comment by phiggins — January 22, 2009

looks interesting, but is there an example how to implement the Dojo Zoomer on a page.

Comment by BlackJaack — January 12, 2010

Leave a comment

You must be logged in to post a comment.