Jcrop v0.9.9 Available Now!

Read this post to learn about all the changes to the new and long-awaited release of Jcrop v0.9.9

A new version of Jcrop is available today, Jcrop v0.9.9. It offers many worthwhile improvements. Read on to learn about all the new changes. (Incidentally, this post is in lieu of updates to the documentation and site in general, which I am currently working on, amongst many other projects.)

Jcrop moves to  Github

The project is now being maintained with git, and an official repository is now available on Github. If you don’t use git, don’t worry; just click the “downloads” button. Maybe sometime I will extol all the virtues of git and Github, but for now just consider it a very good thing for the project. If you do use git, Jcrop is open to collaboration. Get in touch.

Callbacks have API Context

All callbacks are now called in the context of the Jcrop API. In other words, the “this” variable now points to the Jcrop API inside any callback functions that are called by Jcrop. For example:

$('#target').Jcrop({
   onSelect: function(c){ this.release(); }
});

The fairly useless example above would create a Jcrop instance that cleared the selection whenever a selection was made. Any Jcrop API method can be called on the “this” variable, within the scope of any Jcrop-called callback function.

Initialization Callback

Since Jcrop needs the image to finish loading, and does a number of things to set up it’s interface, it’s often useful to know when that process has finished. You may also want to further initialize parts of the interface that rely on Jcrop being attached.

To register this callback, include the function as the second argument to the jQuery plugin Jcrop method call:

$('#target').Jcrop(options,callback);

Since this callback function is called in the context of the Jcrop API, it provides easier access to the API as well. Probably the most common use case for this callback will be something like this:

var jcrop_api;
$('#target').Jcrop(options,function(){
    jcrop_api = this;
});

This will now be the preferred pattern for grabbing the API. Notice that the jcrop_api variable is declared in an outer scope, but assigned a value only after Jcrop has initialized. Also note: as usual, you must place the code above within jQuery’s DOM-ready wrapper, which has been left out for brevity.

Image can now be changed via API

One of the most relevant changes for typical Jcrop developers will be the ability to update the image that Jcrop is cropping. The new API method api.setImage(src,callback) makes this possible. The src string is a URL for the new image. The callback is called when the image is done loading and the interface has been updated.

Experimental Touch Support

This is a pretty big development that made it in at the last minute.

There is a new option called touchSupport that defaults to null. If you set it to true or false, this will enable or disable touchSupport. By default it will auto-detect. The touch support appears to work correctly in iOS(iPhone/iPad/iPod Touch)-based Safari and Android/Chrome. Please give your feedback if you test this!

Major MSIE enhancements/changes

A major rendering bug was recently discovered using previous versions of Jcrop in IE6. And frankly, Jcrop never worked really well in Internet Explorer, partly because of the issue of IE6 compatibility.

Much work has gone into optimizing the Jcrop experience in Internet Explorer. The v0.9.9 version brings IE7+ into parity with the experience on “A-grade” browsers. This is partly due to the removal of some of the crutches for IE6, that were probably being applied to other versions of IE less appropriately.

Ultimately, the IE6 experience has also been made much more stable, by implementing a few targeted fixes that only apply under IE6. This comes with a slight level of visual degradation under IE6 that we can probably agree has to be accepted at this point. Please feel free to send feedback you have on these changes.

Also, disabled the cursed “Accellerators” in Internet Explorer.

Even more new features

  • Default options now stored in $.Jcrop.defaults
  • New behavior options: allowSelect, allowMove, allowResize (all default true)
  • Enhanced keyboard support, mostly defaults to enabled now (keySupport: true)
  • Added onRelease callback for when selection is cancelled or disappears
  • Added bgFade option (default: false)

Help The Project

Your feedback about this update will help move the project forward!

Like the Jcrop page on Facebook – currently only a few people do, and I know there are a lot more Jcrop fans out there that are on Facebook. Show some love, and we’ll do the same with more updates (to the project, and to the Jcrop feed on Facebook).

One Response to “Jcrop v0.9.9 Available Now!”

  1. ccihrNo Gravatar wrote:

    For most chinese, IE6 is so common. So thank you so much for your hard work on IE6.