Jquery Plugin: dcookorg_selector_aspect

This is a plugin, that builds on JQuery and JQueryUI, to allow selecting part of an image. It maintains the given aspect ratio when it does this. See a usage example.

Minimal Usage Example

You need an image. To make selecting it easier you will normally give it an id:

<img id="img" src="man_in_tree.big.jpg" width="420" height="560">
and then you attach the magnifier as follows:
$('#img').dcookorg_selector_aspect({aspectRatio:3/4});
This is normally done inside the "on DOM loaded" function of jquery.
$(function(){$('#img').dcookorg_selector_aspect({aspectRatio:3/4});});

More Information

The class is well-documented inline, so refer to that for full details. In addition to aspectRatio, you can also specify the CSS to use to create the selector div. The "containment" option is to work around a bug with IE browsers when also using special effects (such as rotate); if you find you can drag the selector outside the image on IE browsers then you will need this, otherwise you can ignore it. (You might also want it if you want to deliberately let the selector move outside the photo, or conversely only within a portion of the photo; however that functionality is not properly supported in the current version.)

The selector div will be given an ID the same as the image, with "_selector" appended. E.g. in the above Minimal Usage Example it will be called "img_selector". You could then have a button that toggles its visibility, e.g.

$('#img_selector').toggle();

Only one selector per image is supported. To change the selector first remove the old one. To remove the selector use this code:

$('#img_selector').remove();

License

MIT license, meaning you are free to use it in both private and commercial projects, and free to adapt it however you wish.

Releases

Please download and host on your own server.

0.1

Released: 2010-05-24, 4.7Kb

The plugin comes in a single file, documented fairly well with a comment block at the top of the file: dcookorg_selector_aspect.js. It should reduce quite a lot if minimized. It is beta-quality (fairly well tested on all of FF3 (linux), FF3.6 (win), IE6, IE7, IE8 and Safari(win)).

Other required files: jquery, jqueryUI (at least the draggable and resizable components), and the jquery CSS file. See the demo file source for how to include the first two files from other servers. If you can drag the selector but cannot get any handles to resize it with then it means the css file is missing. You can get a css file from http://jqueryui.com/download

Bug Reports, Future Development And Helping Out

Contact me at darren at dcook.org. Putting "dcookorg_selector_aspect" in the subject should help get you past my spam filters.

If you find a problem please let me know a URL where I can try it out; also let me know your browser and which version of jquery and jqueryUI you are using. If you can let me know if your browser works fine with the above demo, that will also help troubleshooting.

Let me know of any cool sites or demos you make using this plugin!

Note that half the current code is to get around the fact that resizable containment is broken as of jqueryUI 1.8. Hopefully this will be fixed in jqueryUI 1.9, in which case a new smaller version will be possible.