Rotate images using jquery

by Posted on

In this tutorial i am going to show you how to rotate image using jquery, There is a plug-in called jQueryRotate is available on web to apply rotate animation on image in very minimal code.

So Here i am going to use this jquery based plug-in and will show you some image rotation examples.
img-rotation




First of all create your html file and call some sample images.

<HTML>
<HEAD>
<TITLE>Rotate image using jquery</TITLE>
</HEAD>
<BODY>
<div style="width:50%; margin:0 auto; text-align:center">
<h3>Example-1</h3>
 <img src="img/chrome.png" class="img1">
 <img src="img/internet-explorer.png" class="img1">
 <img src="img/safari.png" class="img1">
</div>
</BODY>
</HTML>

After that add jquery core and jQuery Rotate library on your html page.
Note: jQuery Rotate library is dependent on jquery core library so don’t forget to add core library before jQuery rotate library.

<script src="jquery.min.js"></script>
<script src="jQueryRotate.js"></script>

Apply rotate action on images.

$(function() { 
 var rotation = function (){
   $(".img1").rotate({
      angle:0, 
      animateTo:360, 
      callback: rotation
   });
  }
}




Apply rotate action on button click, Means control image rotation using start and stop button.

<div>
 <button id="start">Start Rotation</button> 
 <button id="stop">Stop Rotation</button>
</div>
$(function() { 
var ang = 0;
 $("#start").click(function() {  
 
   window.st = setInterval(function(){
	    ang+=4;
	  $(".img1").rotate(ang);
	  },10);
 });
 
 $("#stop").click(function() {  
   clearInterval(window.st);
 });
}

DEMO

DOWNLOAD

You can apply more rotation action as per your requirement just go through jQuery Rotation official document http://jqueryrotate.com/

If you like this post please don’t forget to subscribe my public notebook for more useful stuff

Published by admin