Comment ça marche? v1.0

Download

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.

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