AnythingZoomer jQuery Plugin

You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuery plugin that does it. I’m not going to tell you what you should use it for or elaborate use-case scenarios. Your own creativity can help you there.

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 emerging custom of jQuery plugins that benefit from demos, I’ve put several demos and the documentation for it all in one place.

This is a jQuery plugin, so you’ll need to load the jQuery library first, then the plugin file, then invoke the new function on the area you wish to have zooming. There is a specific HTML structure and some required CSS to have all this work correctly, so read on. The full list of parameters is also below.

$(function() {


expansionSize: 30,
speedMultiplier: 1.4




There are five parts to a zoomable area. The idea is to allow for a good amount of flexibility in customizing each part, including having the “small” area be different content than the “large” zooming area.

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

You are not locked into these ID’s though, you can override then when calling the plugin.

small rushmore

big rushmore                    


The widths, heights, borders and things like that can be altered to your needs. The positioning, z-index, overflow, and top/left values should stay as it is here to function properly.

#wrap          { width: 600px; position: relative; }
#small         { position: relative; width: 100%; }
#large         { background: white; position: relative; width: 600px; }
#mover         { position: absolute; top: 0; left: 0; width: 104px; height: 104px; overflow: hidden; z-index: 100; background: white; display: none; }
#overlay       { border: 1px solid blue; width: 102px; height: 102px; position: absolute; top: 0; left: 0; z-index: 200; }

All Params


expansionSize: 30,      // How far outside the wrap edges the mouse can go
speedMultiplier: 1.4,   // How much faster in the inside area moves than the mouse

smallArea: "#small",    // Overrides small area ID
largeArea: "#large",    // Overrides large area ID
zoomPort: "#overlay",   // Overrides zoom overlay area ID
mover: "#mover"         // Overrides mover ID



Be Sociable, Share!

Leave a comment