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?).
Hey,
thanks for updating to 0.3
I can now hide my selection the way I wanted. Perfect!
I tried to do the minHeight/minWidth thing. It is working, but not perfectly. If I just click into the image the selection still is 1px/1px unless I start dragging. Then it gets the min values.
But it would be nice, to have min values also if the user only clicks into the image. Imagine a DAU that doesn’t know dragging in browsers now is available. He may just click into the image, get the 1px/1px selection and maybe doesn’t see it.
Nevertheless: keep up the good work. Am lovin’ your plugin
Another idea:
Could you implement onDraggingSelection/onSelectDrag (or whatever name) function besides the onSelectStart,onSelectEnd,onSelectChange in 0.4? Would be a tiny nice feature
I’ll think about it, thanks for the feedback
Nice plugin!
Could you implement a function to allow user input text in seletced area?
Best Regards!
Great plugin, thanks for putting it out in the world. I’m going to pile on another feature request: The ability to specify the color and opacity of the UN-selected area. In my case, I’d like the selection to show the raw image (no color or opacity change) and the un-selected area to be tinted. IMO, this gives the user a little clearer view of the important stuff – the selection.
There is a nice example of this sort of thing here (written w/ Prototype):
http://www.defusion.org.uk/demos/060519/cropper.php?demoType=preview&image=castle&formSubmit=Load+demo
Wow …. the script is great – but “Rich Thornett” ‘s Opinion is right. I need too this feature
. Sorry for my bad english – i am a Kraut 
Ok, I’ve added this feature to my to-do list for the next version
Hi,nice plugin, but i’v got problems using it in a thickbox.
seems to be the offset-val of the image when the surrounding div is position: fixed.
i fixed the needed z-index by myself… but that’s tricky.
Thornetts’s feature is something i need, too.
When do you want make ne next release? ;O)
derKoenig
Hi,
if you call the function when opening the thickbox and NOT on document.ready, it works. But then you are not allowed to scroll. maybe thats something for your feature list ;O)
Thanks
derKoenig
Thanks for the plugin! It’s great!
I’ve noticed a bug when resizing the browser window. The selection box seems to have an absolute position specified, so if you resize your window to be wider and your image isn’t left-aligned, the selection box appears outside of your image.
Also of note: when the selection box is outside of the image like this, when you drag the box around, it snaps back to the image – perfect. But, moving the box around is super fast!
When you click on the selection box when it’s on top of the image, dragging the box around is very slow. What’s the discrepancy? It’d be nice to have it super fast all the time!
Oh, because it seems to behave a little differently when I change the settings:
For my comment above, I had set ‘resizable’ to ‘false’. With the selection area not resizable but moveable, you can move the box around after it gets shifted out of bounds of the image.
Great! Just what I was looking for. Since I’m so new to jQuery could you please help me out? I’d like the user to be able to upload an image first then after selecting an area, to crop it. How do I do all that?
@everyone:
Thanks for all the feedback. I just got back from a holiday and I need a few days to look into all the issues.
@Sarah Neuber:
The actual cropping is beyond the scope of the plugin, as it needs to be implemented on the server side, with the help of the appropriate technology (like PHP or ASP). If I have enough of the mystical spare time, I’ll write a tutorial on how to do this.
Hi…
Thanks a lot for the plugin…
Is there a way to uninitialize it dynamicaly ? I don’t initialize it on load but when we ask it for… I would like to do the same in the other way (unload it?)
One other thing :
there is 2 call to $(‘body’).css(…. in the code…
I am using jQuery in noConflict() mode in order to use other libraries and it breaks the resize part
Is it possible to replace this whith jQuery(‘body’).css(… for the compatibility?
Thanks anymore
@kent1:
Unloading added to my to-do list for the next release.
Thanks for catching the $(‘body’) call, I overlooked it. It will surely be replaced.
Hi there… i need some help.
Everything works perfectly fine but when i i want to start skinning the template by separating the big image and the crop preview by different table cell, the preview area stops working.
Eg:
XXX
If i place a text ( XXX ) inbetween the big image and thumbnail, it work but as long as there html tags in between, error is found.
Even if i add just a BOLD TAG inbetween, the preview area dont work.
Any idea how i could resolved this?
ops sorry… the XXX part is
[img src="[?php echo $upload_path.$large_image_name;?]” style=”float: left; margin-right: 10px;” id=”thumbnail” alt=”Create Thumbnail”]
XXX
[div style="float:left; position:relative; overflow:hidden; width:[?php echo $thumb_width;?]px; height:[?php echo $thumb_height;?]px;”]
[img src="[?php echo $upload_path.$large_image_name;?]” style=”position: relative;” alt=”Thumbnail Preview”]
[/div]
@Andy:
If you’re using the code from this example to implement selection preview, then you probably need to modify the jQuery selector that matches the thumbnail image (in the example it’s
'#ferret + div < img') after you change the HTML structure.you can add a parent parameter on imgAreaSelect to work with thickbox, lightbox, etc…
imgAreaSelect({onSelectChange: preview, handles: true, parent: ‘#TB_window’})
change TB_window to whatever is the id of your thickbox oe lightbox…