AnythingZoomer v1.0

Basics

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
    	
});