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 < body > tag:
<!-- Include the VML behavior -->
<style>v:image { behavior:url(#default#VML); display:inline-block }</style>
<!-- Declare the VML namespace -->
<xml :namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
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.
Wilq32.RotateImage Script
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 < body > tag:
<!-- Include the VML behavior --> <style>v:image { behavior:url(#default#VML); display:inline-block }</style> <!-- Declare the VML namespace --> <xml :namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />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 complete,
- [bind: [ {event: function}...] -optional parameter, list of events binded to newly created rotateable object
Demo: http://wilq32.googlepages.com/wilq32.rollimage222
Download: http://wilq32.googlepages.com/jQueryRotate.js
Source: http://wilq32.googlepages.com/wilq32.rollimage222
Related Listings: