ZoomPan jQuery Plugin (for ScraperWiki)

jquery.zoompan.js

// Invoke using something like:
// HTML: <img src="foobar.png" width="400" height="300" alt="Example" />
// JQUERY: $('img').zoompan({sw: 400, sh: 300, lw: 2851, lh: 2135});

(function($){
$.fn.zoompan = function(settings) {
    
    settings = jQuery.extend({
        sw: 100, // small image width
        sh: 100, // small image height
        lw: 200, // large image width
        lh: 200 // large image height
    }, settings);

    return this.each(function(){

        var $img = $(this).css({
            width: settings.sw, 
            height: settings.sh, 
            position: 'absolute', 
            top: 0, 
            left: 0
        });
        var $wrapper = $img.wrap('<div>').parent().attr('class', 'zoompan').css({
            width: settings.sw, 
            height: settings.sh,
            position: 'relative',
            overflow: 'hidden'
        });
        
        $img.bind('dblclick', function(e){
            if($img.width() < settings.lw){
                var clickx = ( e.pageX - $wrapper.offset().left ) / settings.sw;
                var clicky = ( e.pageY - $wrapper.offset().top ) / settings.sh;
                var posx = ( clickx * settings.lw * -1 ) + ( 0.5 * settings.sw );
                var posy = ( clicky * settings.lh * -1 ) + ( 0.5 * settings.sh );
                $img.animate({
                    width: settings.lw,
                    height: settings.lh,
                    top: Math.min( Math.max((settings.lh * -1) + settings.sh, posy), 0),
                    left: Math.min( Math.max((settings.lw * -1) + settings.sw, posx), 0)
                }, 100).draggable( "option", "disabled", false ).css('cursor', 'move');
                $('p', $wrapper.next()).text('Drag image to pan around. Double click to zoom back out.');
            } else {
                $img.animate({
                    width: settings.sw,
                    height: settings.sh,
                    top: 0,
                    left: 0
                }, 100).draggable( "option", "disabled", true ).css('cursor', 'default');
                $('p', $wrapper.next()).text('Double click image to zoom in.');
            }
        }).draggable({ 
            disabled: true
            /*,drag: function(event, ui) {
                if(ui.position.top > 0){
                    return false;
                }
                if(ui.position.top < (settings.lh * -1) + settings.sh){
                    return false;
                }
                if(ui.position.left > 0){
                    return false;
                }
                if(ui.position.left < (settings.lw * -1) + settings.sw){
                    return false;
                }
            }*/
        });
            
            $wrapper.after('<div class="zoompantip"><p>Double click image to zoom in.</p></div>').next().css({width: settings.sw});
        
    });

};

})(jQuery);