/*
* THIS IS FREE SCRIPT BUT LEAVE THIS COMMENT IF
* YOU WANT USE THIS CODE ON YOUR SITE
*
* Made by Wilq32, wilq32@gmail.com, Wroclaw, Poland, 01.2009
*
*/
/*
Description:
This is an final product of a Wilq32.PhotoEffect Snippet. Actually you can
use this simple and tiny script to get effect of rotated images directly
from 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).
To use it in IE you need those two lines to be added after tag:
If someone know working workaround for doing this only in javascript please
let me know. Right now i tried using createStyleSheets but IE doesnt recognise
"v\: *". Adding namespace with document.namespace.add is also messy. If
someone know this problem and a solution just please let me know.
Usage:
jQuery(imgElement).rotate(angleValue)
jQuery(imgElement).rotate(parameters)
jQuery(imgElement).rotateAnimation(parameters)
jQuery(imgElement).rotateAnimation(parameters)
Returns:
jQueryRotateElement - !!! NOTICE !!! function return rotateElement
instance to help connect events with actually created 'rotation' element.
Parameters:
({angle:angleValue,
[animateAngle:animateAngleValue],
[maxAngle:maxAngleValue],
[minAngle:minAngleValue],
[callback:callbackFunction],
[bind:[{event: function},{event:function} ] })
jQuery(imgElement).rotateAnimation
Where:
- angleValue - clockwise rotation given in degrees,
- [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 is done
- [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()
{
var rot=$('#image3').rotate({maxAngle:25,minAngle:-55,
bind:
[
{"mouseover":function(){rot[0].rotateAnimation(85);}},
{"mouseout":function(){rot[0].rotateAnimation(-35);}}
]
});
});
*/
jQuery.fn.extend(
{
ImageRotate: function(parameters){
if (this.Wilq32 && this.Wilq32.PhotoEffect){
return null;
}
return (new Wilq32.PhotoEffect(this.get(0), parameters))._temp;
},
rotate: function(parameters){
if (this.length === 0 || typeof parameters == "undefined"){
return null;
}
if (typeof parameters == "number"){
parameters = {angle: parameters};
}
var returned = [];
for (var i = 0,i0 = this.length;i= this._parameters.animationTime){
this._angle = this._parameters.animateAngle;
this._rotate(this._angle);
return;
}
var deltaFactor = dt/this._parameters.animationTime;
var newAngle = this._angle + (this._parameters.animateAngle - this._angle)*deltaFactor;
this._rotate(newAngle);
var self = this;
this._timer = setTimeout(function(){ self._animate.call(self); }, 10);
};
// STILL DONT WORK ON IE8...
/*
if (jQuery.browser.msie)
{
document.createStyleSheet().addRule('v\\:image', "behavior: url (#default#VML);display:inline-block");
document.namespaces.add('v', 'urn:schemas-microsoft-com:vml');
if(document.documentMode && document.documentMode>=8) {
document.writeln('');
}
}*/