# AnythingZoomer 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.

- 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

    });