YUI-based Image Magnifier Widget

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.

4 thoughts on “YUI-based Image Magnifier Widget”

  1. Adam Platti

    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!!

  2. Julien Lecomte Post author

    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.

  3. ralf k

    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.

  4. ralf k

    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.

Comments are closed.