Facebook like image rotate using Jquery

Rotate Image using Jquery

In this article I will explain you how to rotate an image like facebook using jquery Image Rotate extension. This is an extension for jQuery to rotate images directly within JavaScript. This library has been tested with Mozilla FireFox 2.0.0.2, Internet Explorer 7.0 and Opera 9.1 (Opera 8 is not supported). First you have to load the jquery library.

Once the Jquery library is loaded you can rotate the image by calling rotateLeft([angle=90]) or rotateRight([angle=90]) on the jQuery object. While you rotating an image Internet Explorer also rotates the border around an image, the other browsers don’t.
Find the demo and download the example file below.

Download FileDemo

Below is the Jquer to call in HTML page.

$(document).ready(function(){
$('#clickLeft').click(function(){
$('#theimage').rotateRight();	
});

$('#clickRight').click(function(){
$('#theimage').rotateLeft();
});
});

When you click on the rotate button jquery will rotate the image. you can also mention the angle to rotate. For ex,

$('#theimage').rotateRight(45);	

Now the image will rotate at 45 degree. Hope this will help you..

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>