How to rotate an image to the next degree on a button click event?

Question

I play with jquery.rotate.js and I want to rotate the image every time to the next degree of rotation.

I have included the following jquery libraries:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript' src='jquery.rotate.1-1.js'></script>

JQuery Code:

$(window).load(function() {
    $("body").on("click", "#button", function() {
        $(".north").rotate(a());
    });
    nextAngle = 0;
    function a() {
        nextAngle += 90;
        if (nextAngle >= 360) nextAngle = 0;
        return nextAngle;
    }
});

HTML code:

<img class="north" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSGPgQ8k88yaWVPRytT957hKLV-89QmZtkZc44q45TEDdqe9sKwqg">
<input type="button" id="button" value="Rotate me">

My JSFiddle: Example

In my current code, the image rotates only once, but I want to replay the image every time I click the button. How is this possible with jQuery.rotate.js?

I want an image rotation like this sequence:

Any idea?

Thank.

Answer 1

Make changes to jQuery as shown below:

$("body").on("click", "#button", function () {
    $(".north, canvas").rotate(getNextAngle());
});

Since when you click to rotate, the image is converted to canvas.

Fiddle

Edit:

JQuery , , .

$("body").on("click", "#button", function () {
    $(".north, canvas").rotate(90);
});

Fiddle