Basic image Rotate effect with jQuery demo

Comments, Issues, SVN-repository:

Description:

This is an final product of a Wilq32.PhotoEffect Snippet (browse blog to get more information). Actually you can use this simple and tiny script to rotate images (any angle) directly on client side (for ex. user generated content), and animate them using own functions.

Notices:

Include script after including main jQuery. Whole plugin uses jQuery namespace and should be compatible with older version (unchecked).

Usage:

jQuery(imgElement).rotate(angleValue)

jQuery(imgElement).rotate(parameters)

jQuery(imgElement).rotateAnimation(parameters)

Returns:

jQueryRotateElement - !!! NOTICE !!! function return rotateElement instance to help connect events with actually created 'rotation' element.

Parameters:

({angle:angleValue,

[preservePosition:preservePositionBoolean],

[animateAngle:animateAngleValue],

[maxAngle:maxAngleValue],

[minAngle:minAngleValue],

[callback:callbackFunction],

[animatedGif:animatedGifBoolean],

[bind:[{event: function},{event:function} ] })

jQuery(imgElement).rotateAnimation

Where:

- angleValue - clockwise rotation given in degrees,

- [preservePositionBoolean] (boolean) - optional parameter, preserves an image position instead of increasing size for bounding box

- [animateAngleValue] - optional parameter, animate rotating into this value,

- [maxAngleValue] - optional parameter, maximum angle possible for animation,

- [minAngleValue] - optional parameter, minimum angle possible for animation,

- [callbackFunction] - optional function to run after animation complete,

- [animatedGifBoolean](boolean) - optional set to display animated gif in firefox/chrome/safari !!! this might slow down browser because it need to render image again and again to display animation,

- [bind: [ {event: function}...] -optional parameter, list of events binded to newly created rotateable object

Examples:

$(document).ready(function()
{
	$('#image').rotate(-25);
});

$(document).ready(function()
{
	$('#image2').rotate({angle:5});
});


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

Change Log:

- version 1.6:

- refactored and reviewed code (teft some TODO's), removed lot of unused code,
- increased performance for firefox,
- hopefully fixed IE problem with positioning (1px difference that is visible especially for very small images),
- fixed problem when setting an angle and it animates to angle 0 (instead of staying in place)
- compressed size down from 7kb to 5kb,

- version 1.5:

- fixed problem with setting animateAngle on first rotation
- fixed problem with animating image immediately on document ready

- version 1.4:

- Added css rotation for supported browsers (except firefox that runs slower than on canvas and IE - slower too),
- By adding css rotation - fixed bug with new Chrome and Safari that does not clears whole space when animate,
- dropped support for "preservePosition" -> from now on canvas will always have same height and width as image,
- minor style code changes,

- version 1.3:

- Added "preservePosition" attribute to make rotated images appear in the same position as they would be normal images.

- version 1.2:

- Endless loading problem (second issue) finally fixed!.

- version 1.1:

- Finally fixed setting v:image and namespacing for IE - now you dont need to do anything more than just including script on page!.

- version 1.0:

- Fixed endless loading problem for IE and fixed a reference for 'this' in binding functions. Now $(this) in binding function refers to an object that you can rotate again.

- version 0.95:

- Fixed problem for a jQuery namespacing (Thanks to Régis Gaillard) and fixed issue with using same parameters globally for all items.

- version 0.9:

- Added a support for animated gifs, now you can specify if you want to support them. Notice that this might slow down a bit other things on page because it needs to render images all the time. Use it if you really need it.

- version 0.8b:

- Fixed bug with IE introduced by last version

- version 0.8:

- Fixed problem of document.ready animations for images

- version 0.7:

- Fixed annoying bug in IE 8 by setting v\:image instead of v\: *.

- version 0.6:

- Whole new concept for IE - instead of using canvas itself - right now function uses a nice workaround using vml:image to rotate it faster. All of you involved please do some test with this!.

- Repaired some small bug - now you can rotate all elements like $(".images").

- version 0.5:

- Solved some problems with calling rotation again on the same object, now $("#element").rotate(angle) and .rotateAnimation(angle) and everything related returns proper reference to newly created object.

- version 0.4:

- Added callback functionality

- version 0.3:

- Repaired bug with IE

- version 0.2:

- Repaired bug with some statical rotating problem,

- version 0.1:

- Main relase,

jQuery plugin: jQueryRotate