Question

I am using the jQuery plugin Jcrop. I have an issue with one of the initial setup settings called setSelect.

The property takes in an array with two sets of x and y coordinates (top left corner, and bottom right corner).

<img src="blah" id="cropTool" />
<script type="text/javascript">
    $(function()
    {
        $('#cropTool').Jcrop(
        {
            setSelect: [
                $('#cropTool').width()/4,
                $('#cropTool').height()/4,
                ($('#cropTool').width()/4)*3,
                ($('#cropTool').height()/4)*3
            ]
        });
    });
</script>

Visually this does exactly what I expect. It places a crop selection with the top left corner 1/4th of the way into the image (x and y) and the bottom right corner 1/4th of the way into the image from the bottom right of the image. Like this:

http://www.codetunnel.com/content/images/VisuallyFine.jpg

But then when I go to move it, it jumps to this position:

http://www.codetunnel.com/content/images/Jumps.jpg

It jumps there immediately, I’m not dragging it there. If I try to drag the default selection it jumps after moving it by one pixel or more. After it jumps I can move it around normally. It’s a somewhat minor issue, but it is annoying.

Any ideas?

Answer 1

Turns out another jQuery plugin I was using was interfering with the jcrop positioning. A plugin called colorbox which loads overlay popups was the issue. I was calling jQuery.colorbox.resize() right before I was calling jcrop. When the jcrop code ran the resize was never quite complete. One solution was to put the jcrop code into a setTimeout() to delay the code for a second. That was hackish solution so I asked another more specific question and got an answer. Turns out another fork of colorbox contains a fix to include a function callback on the resize method so that you can execute code when the resize is complete.

jQuery colorbox plugin resize callback