jQuery UI - custom handles for resizable image

Question

Yep so here is a question - how to set custom handles for a resizable img element?

I have image element, which is set to be resizable() with jQuery UI. In order to set custom handles, they need to be child elements of the resizable element. However this is not possible with image element.

jQuery UI docs specify that you can also set handles from outside of the resizable element: http://api.jqueryui.com/resizable/#option-handles

The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly.

My JSFiddle: http://jsfiddle.net/asavin/2LXG8/3/

JS:

$('#elementResizable').resizable({
    handles: {
        'nw': '#nwgrip',
            'ne': '#negrip',
            'sw': '#swgrip',
            'se': '#segrip',
            'n': '#ngrip',
            'e': '#egrip',
            's': '#sgrip',
            'w': '#wgrip'
    }
});

You can see the handles, but they doesn't do anything.

Here is another related question on SO, also without answer: jQuery UI resize custom handles, not children of the resized element

I'm also open for alternative solutions. The point is to get image resizable, and to have custom handles.

Any success trying to get this to work? I'm having a similar issue. — SeanK, Mar 25 '14 at 19:52

score 1 · Answer 1 · edited May 23 '17 at 10:28

1

To resize the image, you can do like this :

    <div id="mydiv" style="display:inline-block">
        <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
    </div>

With JS :

$('#image').resizable();

Here is a sample : http://jsfiddle.net/kris92/3CfwG/

Edit : i am still looking for a good answer regarding custom handles...

Edit : just found a duplicate here Resizable handles with jQueryUI

edited May 23 '17 at 10:28

Community

1
1

answered Dec 04 '13 at 15:45

user2196728

2,915
3
16
15

Well question is exactly about how to get custom handles for the image. – Alexander Savin Dec 04 '13 at 20:13
My guess is that there is two questions in one regarding the "and" statement in it ;) – user2196728 Dec 04 '13 at 20:14

score 0 · Answer 2 · answered Apr 27 '14 at 13:31

0

Your have to modify handlers after call resizable(). Because resizable() always wrap on img, see source code.

answered Apr 27 '14 at 13:31

Jason Wang

111
1
2

jQuery UI - custom handles for resizable image

2 Answers2