HTML & CSS - - By Jennifer Farley

Zoom In With A jQuery Plugin

If you want to add some “Zoom In” functionality to a web page, “Anything Zoomer” is a new free jQuery plugin from Chris Coyier of CSS-Tricks. It’s a simple concept, where you might have a small image or some small text, you roll your mouse over an area and the image or text is magnified, giving you a closer look.

From the creator:

It’s flexible in many ways, in that the “small”, “large”, and “zoom” areas are all pretty easy to customize (via CSS). It’s inflexible in other ways, in that it doesn’t “automatically” work by cloning content or anything like that (which is arguably more flexible), and the HTML structure is fairly rigid.

In the example below you can see the small zoomed-in area above the original small image.

image-demo

As well as working with images and text, the plugin allows you to zoom in on other elements, for example a calendar.
calendar-demo

Although the zoom works beautifully and appears to be a simple concept, there are five parts involved in creating a zoomable area.

  • The Wrap – goes around everything.
  • Small Area – the default viewable area, that you mouse over to zoom.
  • Large – the content to be viewable through the zoomer.
  • Overlay – the zooming box that follows the mouse around.
  • Mover – a wrap for the large area and overlay.

The plugin is very flexible and allows you to customize each of these parts.

Check out the working demos here.

You can download the plugin on the same page, and you’ll be pleased to know there is good support documentation, explaining exactly how to use it.

Other jQuery Zoom plugins to have a look at:

Related Reading:

Sponsors