Micaela 17 de febrero de 2009 a las 09.15
   Imprimir artículo
elWebmaster.com

jQuery: plugin y guía para rotar imágenes


Wilq32.RotateImage es un plugin Canvas de jQuery desarrollado por Pawel Witkowski. La gran virtud de este plugin es la posibilidad de rotar fácilmente imágenes cargadas por usuarios (del lado del cliente) sin tener que husmear en interminables códigos o ingeniárnosla para ver cómo se hace.

El plugin nos permite elegir tanto la cantidad de grados que deseamos que rote, como la animación que nos gustaría que tenga. Conoce un poco más sobre este script, su uso, bugs y notas importantes.

Este es el producto final de un Snippet de Wilq32.PhotoEffect Snippet. Ahora puedes utilizar este peque√Īo script para lograr la rotaci√≥n de im√°genes del lado del cliente (por ejemplo: contenido generado por usuarios), y animar esta rotaci√≥n con funciones propias. Existen m√≠nimos bugs que se resolver√°n con la ayuda de los programadores (¬ŅAlguna soluci√≥n? Contactar a wilq32@gmail.com).

Bugs conocidos

  • En IE los eventos del mouse genera multiplicaciones
  • Existen notificaciones que dicen que el script no funciona con IE 8.0rc1
  • En IE se dan problemas para cargar im√°genes (pero no con el efecto). En ese caso hay que refrescar la p√°gina o ir hacia atr√°s
  • A veces no se aplica la rotaci√≥n est√°tica, pero refrescar el sitio puede ayudar

Uso

  • jQuery(imgElement).rotate(angleVale)
  • jQuery(imgElement).rotate(parameters)
  • jQuery(imgElement).rotateAnimation(parameters)
  • jQuery(imgElement).rotateAnimation(parameters)

Resultado

jQueryRotateElement Р¡¡¡IMPORTANTE!!! la función devuelve rotateElement para posibilitar la conexión entre eventos con el elemento de rotación que se creó.

Par√°metros

  • ({angle:angleValue,
  • [animateAngle:animateAngleValue],
  • [maxAngle:maxAngleValue],
  • [minAngle:minAngleValue],
  • [callback:callbackFunction],
  • [bind:[{event: function},{event:function} ] })
  • jQuery(imgElement).rotateAnimation

Aplicación

  • angleValue – Rotaci√≥n en el sentido de las agujas del reloj dada en grados
  • [animateAngleValue] – Par√°metro opcional, rotaci√≥n de la animaci√≥n en este valor
  • [maxAngleValue] – Par√°metro opcional, m√°xima angulatura posible para la animaci√≥n
  • [minAngleValue] – Par√°metro opcional, m√≠nima angulatura posible para la animaci√≥n
  • [callbackFunction] – Funcional opcional para correr despu√©s de completar la animaci√≥n
  • [bind: [ {event: function}…] – Par√°metro opcional, hace una lista de los eventos bindeados para los objetos reci√©n creados disponibles para rotaci√≥n

Importante

Incluir el script después del jQuery principal. El plugin se ubica en el namespace de jQuery y debería ser compatible con la versión anterior. Si vas a usarlo con Internet Explorer vas a tener que incluir ExCanvas.

Haz clic aqu√≠ para visitar la p√°gina oficial y descargar el plugin ¬Ľ

Fuente: Ajaxian


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder