odyniec.net

Hello, my fellow web developers, it’s time for a new release of your favorite image-area-selecting jQuery plugin — here’s imgAreaSelect 0.6.

This version introduces two new features: keyboard support, which makes it possible to manipulate the selection using arrow keys, and the persistent option, which prevents the user from starting a new selection (so the user can only resize and move the pre-selected area).

The plugin now responds differently to clicking outside the selection area — the current selection is discarded, but a new one is not started until the user begins moving the mouse pointer. This way it’s possible to cancel the selection by clicking in the outer area and not end up with a 0×0 border, as it happened with the previous versions.

Update:
Drat, I just noticed a leftover debugging statement (which displayed keyboard codes in window.status) in the newly released version. I removed it and released the updated code as version 0.6.1.

Version 0.5.1 of imgAreaSelect is out. There was a bug in version 0.5 that caused the selection area to be positioned incorrectly in WebKit-based browsers, and the new version fixes it — so go and grab it if you want your image cropping (or tagging, or whatever) application to work fine in Safari, Konqueror, and the world famous Google Chrome (and a couple others).

By the way, remember the PHP image cropping tutorial I mentioned in my last post? WebMotionUK just published an updated version of it.

Since most people are using the imgAreaSelect plugin to implement image cropping interfaces, and I’ve received a few requests for a fully functional example of such a thing, I planned to write a tutorial on it. But, it seems someone already did this — WebMotionUK has a good article on building a simple tool that allows you to upload an image and crop it, with PHP and imgAreaSelect. So go ahead and read it.

If you have any other interesting examples of using imgAreaSelect, let me know — I’ll be happy to put a link here.

As promised, I’m releasing a new version of the imgAreaSelect plugin.

The plugin code has undergone significant reorganization to make it behave properly in some extreme cases — for example, when the image is placed in a scrollable div. I’ve also added a few features that were frequently requested (like an option to set the parent element).

Here’s a new release of my imgAreaSelect jQuery plugin. I’ve fixed a few bugs and introduced two new features that have been asked for: the ability to enable/disable the plugin on demand, and to set the color and opacity of the unselected area.

Edit:
There were a few bugs in the 0.4 code (thanks to vivo for catching them quickly), so I’ve made a quick update and released version 0.4.1.

Edit #2:
This is definitely not my lucky day. It seems my quick update was in fact too quick, as the updated version turned out to be broken in IE. I fixed it (and TESTED this time) and made yet another release, so it’s version 0.4.2 now.

I’ve finally had some spare time to update the imgAreaSelect jQuery plugin. A couple goodies that you people requested are now added, including the ability to pre-select an area on initialization, and dynamically change selection options.

All the usage examples have been updated to demonstrate a more bulletproof way of initializing the plugin. The initialization method is now called in the $(window).load() event handler instead of $(document).ready(), to prevent the plugin from being started before the image itself has finished loading — I know a few people encountered this problem. Thanks to Wojtek Zymonik for pointing it out.

I’ve also reworked the callback function example to incorporate real-time preview scaling (sounds neat, doesn’t it?).

Since many people (okay, actually just six people) requested a few additional features for the imgAreaSelect plugin, I’m releasing an updated version. The plugin now supports moving and resizing of the selection area, width/height limits, and fixed proportions.

I’ve also added a couple more usage examples.