I developed this plugin for Shrelp and wanted to share it. I'm still planning on using the styleFollower and styleViewer methods to set the styles for those objects. If you have any better ideas for configuration let me know.

Please provide feedback if you see anything that is funky.

 
/*
todo:
add config for viewer target, width, height, css border
*/
(function($){
 
	var thumb_nail, 
			follower, 
			viewer,
			viewer_img;
 
	var VIEW_TARGET_ID  = "right_col"
	var VIEWER_WIDTH    = 450;
	var VIEWER_HEIGHT   = 450;
	var FOLLOWER_WIDTH  = VIEWER_WIDTH * .2;
	var FOLLOWER_HEIGHT = VIEWER_HEIGHT * .2;
	var FOLLOWER_BKG    = "url(/images/image_inspect/follower.png)";
 
	var THUMB_URL,
	       LARGE_URL;
	$.fn.styleFollower = function(cssObj) {
 
	}
	$.fn.styleViewer = function(cssObj) {
 
	}
	$.fn.initImageInspector = function(thumb, large) {
		THUMB_URL = thumb;
		LARGE_URL = large;
	};
	function createFollower(){
		follower = $("<div id='follower'><div/>");
		follower.css({
			position:"absolute",
			background:FOLLOWER_BKG,
			width:FOLLOWER_WIDTH+"px",
			height:FOLLOWER_HEIGHT+"px"
		});
		thumb_nail.parent().prepend(follower);					
		follower.hide();
	}
	function createViewer(){
		viewer = $("<div class='checker_bkg' id='viewer'></div>");
		viewer.css({
			border: "1px solid #A3DD2F",
			background:"#1B1E24",
			position:"absolute",
			"z-index":10000,
			overflow:"hidden",
			width:VIEWER_WIDTH+"px",
			height:VIEWER_HEIGHT+"px"
		});
		$("#"+VIEW_TARGET_ID).prepend(viewer);
		viewer_img    = new Image();
		viewer_img.id = "viewer_img";		
		$(viewer_img).css({position:"absolute"});
		viewer.append(viewer_img);			
		viewer.hide();
	};
	function doMouseMove(e){
		var top    = e.pageY - (FOLLOWER_HEIGHT/2);
		var bottom = thumb_nail.offset().top + thumb_nail.height();
		if( top < thumb_nail.offset().top ) {
			top = thumb_nail.offset().top;
		} else if( top > (bottom - FOLLOWER_HEIGHT) ) {
			top = (bottom - FOLLOWER_HEIGHT);
		};
		var left  = e.pageX -(FOLLOWER_WIDTH/2);
		var right = thumb_nail.offset().left + thumb_nail.width();
		if ( left < thumb_nail.offset().left) {
			left = thumb_nail.offset().left;
		} else if( left > (right - FOLLOWER_WIDTH) ){
			left = right - FOLLOWER_WIDTH;
		};		
		$("#follower").css({ left: left	 + "px", top: top + "px" });
		// move viewer
		var f_left = left - thumb_nail.offset().left;
		var f_top  = top - thumb_nail.offset().top;		
		var tx     = (f_left * $(viewer_img).width() / (thumb_nail.width()+(FOLLOWER_WIDTH/2)));
		var ty     = (f_top * $(viewer_img).height() / (thumb_nail.height()+(FOLLOWER_HEIGHT/2)));
		$(viewer_img).css({top: -ty,left: -tx});
	};
 
	$(window).bind('load',function(){
		thumb_nail = $("#main_image");
		createFollower();
		createViewer();
		thumb_nail.parent().bind("mouseenter",function(){
			if(viewer_img.src=="") {
				viewer_img.src = thumb_nail.attr("src").replace("medium","full");
			}
      $(document).bind("mousemove", doMouseMove);
			follower.fadeIn();
			viewer.fadeIn();
    })
		.bind("mouseleave",function(){
      $(document).unbind("mousemove", doMouseMove);
			follower.fadeOut();   
			viewer.fadeOut(); 
    });
 
	});
})(jQuery);
 
 

This is how to invoke the viewer.

$().initImageInspector("thumb.jpg", "large.jpg");