Center and rotate image using IE8 (jQueryRotate)

Question

All,

I am looking for a way to center and rotate an image in response to a button click. I am using jQueryRotate library.

This is the approach that I have been considering.

http://jsfiddle.net/HatAndBeard/k3Gxj/6/

This works fine in Chrome / Firefox, but not in IE8 or lower. There are some image artifacts that I cannot get rid of. Any ideas?

PS I do not have strict requirements regarding how rotation is done, so other approaches are welcome.

PSS I can post the code if you don’t like the JSFiddle links.

Answer 1

Hi, the author of this plugin, and I welcome any comments and questions about this plugin on the plugin's home page :)

Can you explain a little more of your problem since I cannot reproduce it in IE 8 or IE7 emulated in IE8. Also creating a problem would be nice :)

The only “strange” problem that I saw is just the image loading effect, which you can easily get rid of, if after loading your page you just do $ (img) .rotate (0) →, it will ensure that when you click the image, it will be ready for animation :)

Greetings

Answer 2

In the end, I ran into a problem using the BasicImage rotation functionality in IE. I needed to show images in increments of 90 degrees so that this approach would work.

A rough sketch of what I did ...

function ieRotate(element, rotation) { var rotationInt = 0; switch (rotation % 360) { case 0: rotationInt = 0; break; case 270: case -90: rotationInt = 3; break; case 180: case -180: rotationInt = 2; break; case 90: case -270: rotationInt = 1; break; } element.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + rotationInt + ')'); } 

Answer 3

You tried to use RaphaelJS . With this library, I had a good cross browser experience in the past.

Click-to-rotate images with raphael is an easy task, check out this demo: http://raphaeljs.com/image-rotation.html