Julien Lecomte’s Blog

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.

Comments RSS