jquery rotate, drag and resize

Question

I am working on a project in which i want to drag, rotate and resize images. This is my first jquery project and so far things are working ok. Trough stackoverflow i found the plugin jqueryrotate which handles the rotation.

The problem is that i now have an image which i can drag around and rotate but when i try to resize a rotated image, i get some funny results. The resizing after the rotation seems off.

HTML

<script type="text/javascript" src="http://jqueryrotate.googlecode.com/files/jQueryRotate.2.1.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>    

<img id="resizableImage0" class="resize" width="100px" height="100px" alt="tile0" src="http://www.elaxtro.com/images/demo.png">
<img id="resizableImage1" class="resize" width="100px" height="100px" alt="tile1" src="http://www.specialized.com/OA_MEDIA/2009/bikes/9397-20_demo8_2_ano_blue_d.jpg">

jQuery

window.zindex = 30;

$(document).ready(function() {
    $(".resize").resizable();

    $(".resize").parent().draggable({
        stack: "div"
    });

    $(".resize").rotate({
        bind: {
            dblclick: function() {
                // get current
                var currentAngle = $(this).get(0).Wilq32.PhotoEffect._angle;
                var newAngle = currentAngle + 90;
                $(this).rotate(newAngle);
            }
        }
    });
});

The fiddle should make things clear. Fiddle

Doubleclicking rotates an image 90 degrees :)

Is there anyone who can help me with this.

Thank you in advance.

Edit: fixed the resizer in the fiddle example Please note that the problem is best visible if you rotate once so that the image is 90 degrees rotated. After this try to resize.

The problem does not occur when an image is 0 degrees or 180 degrees rotated

just found out that my resizer doesn't work in my fiddle example but it does my own files. I will try to fix this. thank you Rory for updating my post. — luuk86
– luuk86, Commented Jan 11, 2012 at 11:16
Did you find some help? I'm looking for the same, need to build a collage builder tool — Enrique
– Enrique, Commented Oct 11, 2012 at 17:30

Shikiryu · Accepted Answer · 2013-04-09 21:37:49Z

1

As you did with draggable(), you must use rotate() on the parent div.

$(".resize").resizable({handles: 'ne, se, sw, nw'});
$(".resize").parent().draggable({
    stack: "div"
});
$(".resize").rotate({
    bind: {
        dblclick: function() {
            $(this).data('angle', $(this).data('angle')+90);
            var w = $(this).css('width');
            $(this).parent().rotate({ animateTo: $(this).data('angle')}).css({width: $(this).css('height'), height: w});

        }
    }
});

http://jsfiddle.net/U64se/163/ (wow 163…)

answered Apr 9, 2013 at 21:37

Shikiryu

10.3k9 gold badges53 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery rotate, drag and resize

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related