Image Power Zoomer

[mani]

1) Script Title:
DD Power Zoomer script
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...owerzoomer.htm
3) Describe problem:

The script works well with the image zoom. I have a scenario where i rotate the image by 90 deg. Image is getting rotated. But, the zoom still works for original image(0 deg).

I tried to alter the ddpowerzoomer.js script but not getting the desired result. I know the code reads only the image file not the rotated image.

Is there any way to achieve the rotation of the zoom magnifier as per the rotated image.

Thanks

[jscheuer1]

How are you rotating the image? We would probably have to see it to work with it, certainly would be easier than imagining what you're doing and/or trying to figure out from a description.

If you want more help, please put up a demo of the problem somewhere we can see it.

[jscheuer1]

OK, hmm - I have this worked out for modern browsers supporting the transform: rotate(90deg) css3 property value pair (no -moz- or -ms- or other vendor specific variations, not yet at least). But somehow I suspect you might be doing more than a single 90 degree rotation, are you? I mean, I got it to rotate 90 and work, and go back to the original image with no rotation and work, back and forth, just fine. That's with varying magnify powers being preserved between rotated and non-rotated states. But I'm thinking you may also be rotating at 180 and 270. I can probably work those out, but I'm not going to bother unless they are needed. Also, I've only been working with a specific image, so I'm not certain yet if it will work for others, though I'm pretty sure.

I'd really like to see what your rotating and how you're rotating it before going further.

[jscheuer1]

OK, had some time over the weekend. Here's a demo (you can use your browsers 'view source' to get the code):

http://jscheuer1.com/demos/ddpowerzoomer/demo.htm

A few caveats -

• Must use jQuery version 1.8 or higher (the original used 1.4.2 or something like that).
• Only works with browsers fully supporting the css 3 transform: rotate(#deg) property value pair.
• Because of this I've made it so that those that do not will not see the controls for rotating the images - suggest you do the same.

So far tests very well in latest Opera, Firefox, IE, Chrome. Works with either the original image or a larger proportional image used for the magnifier.

Any problems or questions, just let me know.

You will also need the updated script. You should be able to find and download that from the demo linked to above. But if you cannot, right click below and 'save as':

http://jscheuer1.com/demos/ddpowerzo...erzoomertjq.js

Don't hotlink to it, my host is configured to block that.