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.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/zoomer.jquery.js"></script>
<script type="text/javascript">
    $(function() {
                
     $("#wrap").anythingZoomer({
     
        expansionSize: 30,
        speedMultiplier: 1.4
     
     });
        
    });
</script>

The HTML

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.

<div id="wrap">
        
   <div id="small">
      <img src="images/rushmore_small.jpg" alt="small rushmore" />
   </div>

   <div id="mover">
        <div id="overlay-thing"></div>

        <div id="large">
            <img src="images/rushmore.jpg" alt="big rushmore" />                     
        </div>
   </div>
   
</div>

The CSS

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

$("#wrap").anythingZoomer({
     
      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
     
});