I wrote a prototype YUI-based image magnifier widget that makes use of VML on Internet Explorer and the Canvas tag on all the other A-grade browsers. Attached is a screenshot.
To instantiate the widget, include the following source files in your web page (requires YUI >= 2.3)
<!-- CSS --> <link rel="stylesheet" type="text/css" href="image-magnifier.css"> <!-- Dependencies --> <script src="yahoo-dom-event.js"></script> <script src="dragdrop-min.js"></script> <!-- Image cropper source file --> <script src="image-magnifier-min.js"></script>
Then, place an image on your page:
<img src="myImage.jpg" id="myImageId">
Finally, instantiate the widget:
<script>
new YAHOO.widget.ImageMagnifier("myImageId", "magnified.jpg");
</script>
Although this prototype is not extremely polished, it should work fairly well right out of the box. Here is a live demo of the image magnifier widget (drag the lens around). You can also download an archive containing all the necessary source code.
Nice job! It works really well in Safari, IE seems okay (slighly jumpy), and pretty sluggish in Firefox (on a mac at least).
Do you think there are optimizations possible to make Firefox work better? IE is probably acceptable.
Sweet dude!!
On a Windows box, I get almost the same level of performance on Firefox 2 and Safari 3. The difference you are seeing may be due to specifics of the canvas implementation in Firefox on the Mac.
Thanx a lot. This type of magnifier was, what i was looking for. I modified it a little, because of the background and the unlimited scroll issue… You can experience it.
It works very well in Firefox, Opera and Safari, but IE 8 raises strange errors. Perhaps you got a hint.
Got it. I’ve surrounded the error here: …addRule(“v\\:*”,… and because there is still no real solution for the vml-problem in IE8 i’ve fixed it with the compatibiliy mode:
Dirty, but google maps is using it too.