How to rotate image in jquery

Cronjob

Today we will create a demo to rotate image with the help of jquery. There is a plug-in called jQueryRotate is available on web to apply rotate animation on image in very less code.

So for creating a demo for image rotation we don't need to put much effot since jquey already provide plug-in. So let's  start creating the demo as discussed.

 

Let's  have a look in  the only one page we need to code, index.html. 

 

 
<!-- Image rotating by default -->
<div style="width:50%; margin:0 auto; text-align:center">
<h3>Image rotating by default</h3>
<img height="60" width="60" src="images/js.png" class="auto-rotation">
<img height="60" width="60" src="images/jquery.png" class="auto-rotation">
</div>
<!-- End Image rotating by default -->
 
<!-- Image rotation manually -->
<div style="width:50%; margin:0 auto; text-align:center">
<h3>Image rotation manually</h3>
<img height="60" width="60" src="images/js.png" class="auto-rotation2">
<img height="60" width="60" src="images/jquery.png" class="auto-rotation2">
<div><button id="start">Start Rotation</button> <button id="stop">Stop Rotation</button></div>
</div>
<!-- End Image rotation manually -->
 
<script src="jquery.min.js"></script>
<script src="jQueryRotate.js"></script>
<script>
 
$(function() {
 
// Image rotating by default
var angle = 0;
setInterval(function(){
angle+=2;
$(".auto-rotation").rotate(angle);
},10);
 
 
// Image rotation manually
var ang = 0;
$("#start").click(function() {
 
window.st = setInterval(function(){
   ang+=4;
   $(".auto-rotation2").rotate(ang);
   },10);
});
 
$("#stop").click(function() {
clearInterval(window.st);
});
// End Example-3
 
});
 
</script>
 

 

So in the above file we have created two different example first, where image is rotating automatically and second, where image is rotating manually. So lets under the code step by step. At the top we have two different div defined first one for the showing the automatic rotation and second one for manual. Both are having two images. In  the second example we have two button for starting rotation and stoping the rotation, since the second one is manual rotation.

 

Below  that we have added jquery core and jQuery Rotate library for the actual task of image rotation.  And at the bottom of the file we have script tag within which we  have set rotation for the image. And $(".auto-rotation2").rotate(ang is responsible for the image rotation, here we can set the rotation by the angle and the interval duration in code. So we can manage the speed and other behaviour of rotation as per the requirement.

 

That’s all for now. Thank you for reading and I hope this post will be very helpful for implementation of image rotation in any web application.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.

You can download complete code from here. Download Code