A jQuery plugin for Zooming.

I have worked on a jQuery plugin to allow a user to pan over a low res image and zoom in on the same position in a hi res image. The code is entirely client-side and depends on both low and high res images being available. There is no resampling of the image.The plugin may be applied to multiple images on a page. Before delving into the code let's take a look at an example. (The video seems to hang at a couple of points. Toggling the pause button will allow the video to continue.)

Let's look at the code in the rendering page.

ColdFusion is not necessary for this to work. It is only used as a convenience here so I can show different behavior depending on the url parameter. The plugin works fine in a pure html/javascript page.

Other than loading jquery and the jzoom plugin you only have one line of javascript per image to be zoomed. The call to the init method on the plugin initializes the code and binds the mouse events. We will look at the options in a bit.

The html code very simple. Two img tags for the lores images and an img tag (with an empty src) for the hires display. It is not necessary to surround the hires image with a div, but doing so (with the surrounding div having position:absolute) will prevent the page from reflowing when the hires image is toggled between shown and hidden.

    Options:
    Name              Default Value         Purpose
    src               ""                    The src of the hires image
    id                ""                    The id of the img tag of the hires image
    width             400                   The width of the viewport
    height            300                   The height of the viewport
    wrapperClass      ""                    The class of a generated div which will surround the hires image.
                                              Necessary if you want a border around the hires image.
    hideOnExit        true                  If true the hires image will be hidden when you mouse out of the lores image
 
			
      Methods:
    init           Initializes the plugin, sets options and binds mouse events
    remove         Removes the wrappers around the hires image, unbinds the mouse events, displays the entire hires image
 			 
      Usage:
 	$(selector).jzoom(method,options)
 	      where selector is the id of the lores image, options is an object containing the options.
 			 	
        Example 1:
 			 	
        $("#second").jzoom("init",{src:"coinhires.jpg",id:"view2",width:600,height:400,wrapperClass:"wrapperstyle",hideOnExit:false});

     The lores image has an id of "second", coinhires.jpg is the src of the hires image which has an id of "view2", 
     a 600x400 portion of the hires image will be displayed. This portion will have the style "wrapperstyle" applied to the
     surrounding div and the image will not be hidden when you mouse out of the lores image.

       Example 2:
 			 	
       $("#second").jzoom("remove");

       The entire hires image will display and mousing over the lores image will no longer have any effect. 
       If you want to enable zooming again you would have to initialize the plugin again.

The options and sample usage are shown above.

How does the plugin work?

The plugin wraps the target hires image tag in two divs. One to clip the image(overflow:hidden) and another to position the hires image so that the appropriate portion is shown. Thanks to the folks at ajaxBlender.com (developers of jclip). I have modified the process used in jclip to have the position based on the mouse position in the lores image.

Let's look at the firebug output which shows the html after the init function runs.

Suggestions welcome. The plugin is here.