Center & Rotate image with IE8 (jQueryRotate)

Question

All,

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

Here is the approach I was 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 can't get rid of. Any ideas?

PS I don't have strict requirements for how the rotation is done, so other approaches are welcome as well.

PSS I can post the code if JSFiddle links aren't to your liking.

Answer 1

I ended up working around the problem by using the BasicImage rotation functionality in IE. I only needed to show the images in 90 degree increments so this approach was workable.

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 2

Have you tried to use RaphaelJS instead. With this library I had good cross browser experience in the past.

Rotating images with raphael on click is an easy task, take a look at this demo: http://raphaeljs.com/image-rotation.html

Answer 3

Hi im a author of this plugin and I welcome any of comments and issues about this plugin on the homepage of a plugin :)

Can you explain a bit more your problem, as I cant get it to reproduce in IE 8 or IE7 emulated in IE8. Also creating issue would be nice :)

The only "strange" problem that I saw is just a loading image effect that you can easily get rid of if after loading your page you just do a $(img).rotate(0) -> this will make sure that when you click image it will be ready to animate :)

Cheers,