CODEWITHSUNDEEP
javascriptjquery
Bharu
Bharu

Reputation: 191

Rotate images by clicking a button

I want to rotate an image 90 degrees, 180 degrees and 360 degrees on button click. 

 <img class="test" id="image" src="images/image" alt="This is the Display Image" />

I have used this script and I don't liked it because it just displays one single rotation...

$(document).ready(function() {
   $('#image').rotate({maxAngle:25,minAngle:-55,
      bind: [
        {"mouseover":function(){$(this).rotateAnimation(85); } },
        {"mouseout":function(){$(this).rotateAnimation(-35); } }
      ]
   });
});

Upvotes: 3

Views: 24978

Answers (4)

Seth McClaine
Seth McClaine

Reputation: 10030

$('input').click(function(){
    var img = $('img');
    if(img.hasClass('north')){
        img.attr('class','west');
    } else if(img.hasClass('west')){
        img.attr('class','south');
    } else if(img.hasClass('south')){
        img.attr('class','east');
    } else if(img.hasClass('east')){
        img.attr('class','north');
    }
});

Fiddle: http://jsfiddle.net/JkHqa/

** Look at the JQuery animate function if you want to incorporate animation

Upvotes: 8

user2216267
user2216267

Reputation: 491

Alternatively, you can use CSS 3 also to achieve the same goal

#div:focus
{
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); 
  -webkit-transform: rotate(90deg); 
}

Upvotes: 1

Sonu Sindhu
Sonu Sindhu

Reputation: 1792

Try this I hope it will help.

example

HTML

<img class="test" id="image" src="http://fbhunt.com/images/FBHUNT200.png" alt="This is the Display Image" />

<input type="button" value="click" id="clickme">

JS

$(document).ready(function() {
    $(document).on('click','#clickme',function(){
        $("#image").css({'transform': 'rotate(90deg)'});
    });
});

Upvotes: 2

Hitesh
Hitesh

Reputation: 45

Try this one. http://code.google.com/p/jqueryrotate/ I hope this will help you.

Upvotes: 1

Related Questions