CODEWITHSUNDEEP
jquery
Art Planteur
Art Planteur

Reputation: 533

jquery rotate image onclick

I am trying to achieve this (90 degree rotation), but it fails without errors. This image is within a <a></a> TAG where it has already a toggle jquery function.

<?php echo "<img src='down_arrow.png' onclick='$(this).animate({rotate: \"+=90deg\"});' />"; ?>

Upvotes: 18

Views: 108458

Answers (8)

darrin
darrin

Reputation: 829

I very much liked @Savage's answer above. I wanted to be able to just add a class to an element to make any image with that class rotatable. Also wanted to have it rotate to the right (clockwise) when I clicked on the right side and on the left (counter-clockwise) when I clicked on the left.

Here is where I'm hooking up the click events (from this post) - I do use jQuery on the page so forgive me that indulgence - but this gives you the correct rotation based upon where on the image you've clicked:

        $('.tot-rotatable-image').on('click', function (e) {
            var elm = $(this);
            var xPos = e.pageX - elm.offset().left;

            if((elm.width() / 2) >= xPos){
                addRotation(e, -90);
            } else {
                addRotation(e, 90);
            }
        });

And here's a slightly modified version of addRotation that just takes the event rather than a selector. This works particularly nicely with the approach that @Savage went with related to attaching the current rotation to the DOM element.

        function addRotation(evt, degrees) {
            var control = $(evt.currentTarget);
            var currentRotation = parseInt(control.data('rotation'));
            degrees += isNaN(currentRotation) ? 0 : currentRotation;

            control.css({
                'transform': 'rotate(' + degrees + 'deg)',
                '-ms-transform': 'rotate(' + degrees + 'deg)',
                '-moz-transform': 'rotate(' + degrees + 'deg)',
                '-webkit-transform': 'rotate(' + degrees + 'deg)',
                '-o-transform': 'rotate(' + degrees + 'deg)'
            });

            control.data('rotation', degrees);
        }

I do have some styling issues related to where images overlap each other but still I'm overall pleased at how this can be sprinkled about quickly and easily.

Upvotes: 0

Savage
Savage

Reputation: 2349

I used the answers above and created a method to do incremental rotation, by storing the current rotation in a data attribute on the target element. In other words, every time you call the function, it will add to the existing rotation.

// Increments the rotation (in degrees) for the element with the given id
function addRotation(id, degrees) {
    var control = $('#' + id);
    var currentRotation = control.data('rotation');
    if (typeof currentRotation === 'undefined') currentRotation = 0;

    degrees += parseInt(currentRotation);

    control.css({
        'transform': 'rotate(' + degrees + 'deg)',
        '-ms-transform': 'rotate(' + degrees + 'deg)',
        '-moz-transform': 'rotate(' + degrees + 'deg)',
        '-webkit-transform': 'rotate(' + degrees + 'deg)',
        '-o-transform': 'rotate(' + degrees + 'deg)'
    });

    control.data('rotation', degrees);
}

Usage:

<img id='my-image' />

addRotation('my-image', 90);
addRotation('my-image', -90);

Upvotes: 0

Rossitten
Rossitten

Reputation: 1166

This will enable you to perform an additional rotation of each clik

var degrees = 0;
$('.img').click(function rotateMe(e) {

    degrees += 90;

    //$('.img').addClass('rotated'); // for one time rotation

    $('.img').css({
      'transform': 'rotate(' + degrees + 'deg)',
      '-ms-transform': 'rotate(' + degrees + 'deg)',
      '-moz-transform': 'rotate(' + degrees + 'deg)',
      '-webkit-transform': 'rotate(' + degrees + 'deg)',
      '-o-transform': 'rotate(' + degrees + 'deg)'
    }); 

});

https://jsfiddle.net/Lnckq5om/1/

Upvotes: 8

Manoj A
Manoj A

Reputation: 335

This is the example to rotate image 90deg as following code bellow:

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

Upvotes: 1

Jai
Jai

Reputation: 74738

checkout this: JqueryRotate

this have little things to do, you can see one code example in the image itself.

enter image description here

So in your case you can do this:

$(document).ready(function(){
   $('img[src^="down_arrow"]').click(function(){
      $(this).rotate(90);
   });
});

Upvotes: 7

Jonathon Cwik
Jonathon Cwik

Reputation: 997

Consider a jQuery extension such as: jQueryRotate

It'll make the rotating inside the onclick much easier and more readable.

Upvotes: 14

Varinder Singh
Varinder Singh

Reputation: 1590

Use a combination of css rules -webkit-transform and -moz-transform on image click.For example to rotate image by 90 degree apply following css rules on click

$('img').click(function(){
    $(this).css({
        "-webkit-transform": "rotate(90deg)",
        "-moz-transform": "rotate(90deg)",
        "transform": "rotate(90deg)" /* For modern browsers(CSS3)  */
    });
});

Upvotes: 22

Tom van Enckevort
Tom van Enckevort

Reputation: 4198

Depending on which browser versions you need to support, you could try CSS tranforms.

First, define a CSS class like this:

.rotated {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
  -o-transform: rotate(90deg); /* Opera */
}

And then you can use jQuery to add the class when clicking the link:

<img src="down_arrow.png" onclick="$(this).addClass('rotated');" />

Upvotes: 48

Related Questions