CODEWITHSUNDEEP
javascriptjqueryrotation
Craig Smitham
Craig Smitham

Reputation: 3965

rotate an image multiple times on click with jquery

I am trying to rotate an image using jquery that will rotate on multiple mouse clicks. Using the jquery-rotate plugin, the following code only rotates the image once (transforming to a canvas in firefox) and will no longer rotate on further clicks.

$(".drag-and-rotatable img").click(function() {
    $(this).rotate(45);
});

I'm open to using other JavaScript libraries.

Upvotes: 1

Views: 4561

Answers (1)

Peter Ajtai
Peter Ajtai

Reputation: 57685

When you say rotate(45), you are rotating the image 45 degrees? (make sure it's not radians, I don't use the plugin) from the original rotation, so if you want to keep rotating you have to keep adding or subtracting degrees:

$(function() {                                    // doc ready
    var rotation = 0;                             // variable to do rotation with
    $(".drag-and-rotatable img").click(function() {
        rotation = (rotation + 45) % 360; // the mod 360 probably isn't needed
        $(this).rotate(rotation);
    });
});

Upvotes: 3

Related Questions