/*
* 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:
jQuery(document).ready(function()
{
jQuery('#image').rotate(-25);
});
jQuery(document).ready(function()
{
jQuery('#image2').rotate({angle:5});
});
jQuery(document).ready(function()
{
var rot=jQuery('#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;
return (new Wilq32.PhotoEffect(this.get(0),parameters))._temp;
},
rotate:function(parameters)
{
if (this.length===0) return;
if (typeof parameters=="undefined") return;
if (typeof parameters=="number") parameters={angle:parameters};
var returned=[];
for (var i=0,i0=this.length;ithis._parameters.maxAngle) this._angle=this._parameters.maxAngle;
if (Math.round(this._angle * 100 - this._parameters.animateAngle * 100) == 0 && this._timer)
{
clearTimeout(this._timer);
if (this._parameters.callback)
this._parameters.callback();
}
else
{
if (this._canvas||this._vimage) this._rotate(this._angle);
var self = this;
this._timer = setTimeout(function()
{
self._animate.call(self);
}, 10);
}
}
Wilq32.PhotoEffect.prototype._rotate = (function()
{
if (jQuery.browser.msie)
return function(angle)
{
this._vimage.style.rotation=angle;
var radians=angle*Math.PI/180;
this._vimage.style.top= (this._img._heightMax - this._img.height)/2- (this._vimage.offsetHeight-this._img.height)/2 +"px";
this._vimage.style.left= (this._img._widthMax - this._img.width)/2- (this._vimage.offsetWidth-this._img.width)/2 +"px";
}
else
return function(angle)
{
if (!this._img.width) return;
if (typeof angle!="number") return;
angle=(angle%360)* Math.PI / 180;
var width=this._img.width;
var height=this._img.height;
var widthAdd = this._img._widthMax - width;
var heightAdd = this._img._heightMax - height;
// clear canvas
this._canvas.width = width+widthAdd;
this._canvas.height = height+heightAdd;
//this._cnv.scale(0.8,0.8); // SCALE - if needed ;)
// REMEMBER: all drawings are read from backwards.. so first function is translate, then rotate, then translate, translate..
this._cnv.save();
this._cnv.translate(widthAdd/2,heightAdd/2); // at least center image on screen
this._cnv.translate(width/2,height/2); // we move image back to its orginal
this._cnv.rotate(angle); // rotate image
this._cnv.translate(-width/2,-height/2); // move image to its center, so we can rotate around its center
this._cnv.drawImage(this._img, 0, 0); // First - we draw image
this._cnv.restore();
}
})();
// 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('');
}
}*/