Rotate image every time on click JQuery

Question

I want to rotate an image every time I click on it.. I've created a function to do this but the image only rotate the first time I click on it... Moreover, once the image rotate it change automatically the width and height.. How can I keep the same width and height every time??

This is the function:

$(document).ready(function () {
    $("img").click(function () {
      $(this).rotate(45)       
    })
})

Where does `.rotate()` come from? It is not part of the standard jQuery library — Patrick Evans, Apr 29 '16 at 03:47
I've used this library: https://code.google.com/archive/p/jquery-rotate/downloads — AlexGH, Apr 29 '16 at 03:49
why plugin when you can do it with `css` properties in `jquery`? — Guruprasad J Rao, Apr 29 '16 at 03:51
@GuruprasadRao I think I'll try to do it using css properties in JQuery then :) — AlexGH, Apr 29 '16 at 03:57
Also the image's width/height does not change, the bounding box's width/height changes. To keep the bounding box's dimensions the same you would either have to crop the rotated image or scale the image. — Patrick Evans, Apr 29 '16 at 04:08
here's [the answer](http://stackoverflow.com/a/17348698/3591300) to your question. — Amin Gharavi, Apr 29 '16 at 04:15
The plugin converts the `img` into a `canvas`, that's the reason the click not working for second time — Pugazh, Apr 29 '16 at 04:18

score 2 · Accepted Answer · answered Apr 29 '16 at 04:51

This can easily be done by using just javascript, working example would be like this

<div id="imgWrapper">
    <img src="Desert.jpg" id="image" onclick="rotateBy10Deg(this)">  
</div>

<script>
    var delta =0;
    function rotateBy10Deg(ele){
        ele.style.webkitTransform="rotate("+delta+"deg)";
        delta+=10;
    }
</script>

score 1 · Answer 2 · answered Apr 29 '16 at 04:26

The plugin converts the img into a canvas, that's the reason the click not working for second time. Change your jQuery or refer this demo

$(document).ready(function() {
  $("img").click(function() {
    $(this).rotate(45);
  });
  $('body').on('click', 'canvas', function() {
    $(this).rotate(45);
  });
});

score 1 · Answer 3 · answered Apr 29 '16 at 04:31

1

I suggest setting max-height and max-width in your CSS file. This will ensure the image doesn't exceed a certain size.

answered Apr 29 '16 at 04:31

Oliver Kucharzewski

2,523
4
27
51

score 1 · Answer 4 · edited May 23 '17 at 12:16

1

This link might help you out:

Rotate image with onclick

Taken straight from that link in case you don't want to click:

Javascipt

var rotate_factor = 0;

function rotateMe(e) {
    rotate_factor += 1;
    var rotate_angle = (180 * rotate_factor) % 360;
    $(e).rotate({angle:rotate_angle});
}

HTML

<img src='blue_down_arrow.png' onclick='rotateMe(this);' /></a>

edited May 23 '17 at 12:16

Community

1
1

answered Apr 29 '16 at 04:32

Alex Mac

63
8

score 1 · Answer 5 · answered Apr 29 '16 at 04:38

I think the angle (45 degree) is calculated in reference to its initial angle that is 0. Once the image is in 45 degree it will only have to rotate if the angle changes (eg 90). So the below code may work

$(document).ready(function () {
 var angle = 0;
$("img").click(function () {
      angle = angle+45;
  $(this).rotate(angle); 
})
})

score 0 · Answer 6 · answered Apr 29 '16 at 04:28

0

I did it as you suggested, I used css in JQuery:

css:

.rotate:active {
transform: rotate(180deg)
}

JQuery:

 $(document).ready(function () {
        $("img").click(function () {
//forcing img to rotate every time on click()
            if ($(this).css("transform")=='none') {
                $(this).css("transform", "rotate(180deg)");
            }
            else {
                $(this).css("transform","")
            }
        })
    })

answered Apr 29 '16 at 04:28

AlexGH

2,735
5
43
76

I changed the degrees to 180 instead of 45 because I realized it's better for what I want to do... – AlexGH Apr 29 '16 at 04:36

Rotate image every time on click JQuery

6 Answers6