What is YUI-Magnifier?

YUI-Magnifier is a JavaScript widget that allows you to display a small image on your website and show a magnified version, somewhat like if you were to use a magnifying lens, when the cursor hovers over the small image. This library leverages the Yahoo User Interface library (YUI). Check out our documentation and examples.

Why YUI-Magnifier?

There are many great magnifiers out there. So why make another? While working at Backcountry.com we needed a very specific set of functionality and it needed to be based on the YUI library. There wasn’t anything that was quite right. So, like many open source projects, this began to itch a scratch.

What are the main features of YUI-Magnifier?

• Display a magnified portion of an image, which is controlled by where the mouse is hovering over the image
• Control over styling
• Control over location of magnification lens
• Magnified image can be wrapped by a larger element

How do I use YUI-Magnifier?

For YUI2

magnifier.js (or preferrably magnifier-min.js) is the main file you need. There is also a default CSS file to get you started (some styling is required to make the magnifier look right). I’m guessing you’ll just use this CSS file to get you started and then you’ll totally change it. You can pretty much style this widget however you want. You should probably just take a look in the examples directory to get you started.

For YUI3

Support for YUI3 is not yet complete, but is in the works.

Working Example

You can find example code by downloading YUI-Magnifier and looking in the examples directory.

Where do I get YUI-Magnifier?

Download YUI-Magnifier 0.1, which is the most current version, or view all downloads. You might also be interested in the official YUI-Magnifier documentation.