JQuery_ Novice to Ninja - Earle Castledine [44]
Once everything is in place, you just need to add an image that you’d like to make selectable to the page. We’ve given the image an ID so that it’s nice and easy to select with jQuery. If you want the user to signal that they’re happy with their selection, you can add a clickable button too:
chapter_04/03_jcrop/index.html (excerpt)
In its simplest form, you just have to apply the jQuery plugin to the image. When you reload the page, the image will be augmented with draggable handles and an overlay:
$('#mofat').Jcrop();
The plugin exposes a couple of useful events that you can use to keep an eye on what the user is selecting. It also has a handful of default options for customizing how the selector works. You can restrict the aspect ratio of the crop area and the minimum and maximum selection sizes, as well as the color and opacity of the background overlay:
var jcrop = $('#mofat).Jcrop({
setSelect: [10,10,300,350],
minSize:[50,50],
onChange: function(coords) {
// use the coordinates
},
onSelect: function(coords) {
// use the coordinates
}
});
Here we’ve included some default properties. setSelect allows us to define a default cropping area; we need to pass it an array of coordinates, in the format [x1, y1, x2, y2]. The minSize option is an array containing the selection’s minimum width and height. We’ve also illustrated how you’d capture the onChange and onSelect events. The onChange event will fire many times as the user is dragging the handles or the selection around the image. The onSelect event, on the other hand, will only fire when a selection has been defined; that is, when the user has stopped dragging.
The handlers for the events receive a coordinates object that contains the x, y, x2, y2, w, and h properties. So, in your handler code, you’d write coords.w to obtain the current selection’s width.
By far the most common use for the Jcrop plugin is to define points to send to the server after the user is done selecting. The events that the plugin fires are of no use to us for this purpose, as we have no way of knowing if the user is really finished selecting—that’s why we added a button! We want to know where the selection is when the user clicks the button.
In order to do this, we’ll need to modify our original code a little. When you call Jcrop on a jQuery object as we did above, the jQuery object is returned, ready to be chained into more jQuery methods. However, this gives us no access to the selection coordinates. In order to grab these, we’ll need to call Jcrop differently, directly from $. When called in this way, it will return a special Jcrop object, which has properties and methods for accessing the selected coordinates (as well as modifying the selection programmatically). We need to pass it both a selector for the image to crop, and the set of options:
chapter_04/03_jcrop/script.js (excerpt)
var jcrop = $.Jcrop('#mofat',{
setSelect: [10,10,300,350],
minSize:[50,50]
});
$('#crop :button').click(function() {
var selection = jcrop.tellSelect();
alert('selected size: ' + selection.w + 'x' + selection.h);
})
We’re using the tellSelect method to obtain the current selection; this has the same properties as the event coordinates, so we can use them to send to the server and chop up our picture! In the absence of a server, we’ve chosen to simply alert them, to let you know what’s going on.
Jcrop has a vast array of available options and methods, so it’s strongly recommended that you inspect the demos included in the plugin download to see what’s available.
Slideshows
Every night, customers of the StarTrackr! site use the location information they purchase to hunt down and photograph the world’s social elite. Many of the photos are posted back to the web site, and the client wants to feature some of them on the home page. We’re increasingly comfortable with jQuery, so we’ve told our client we’d mock up a few different