JQuery Hover Zoom Image Script

JQuery is an opensource JavaScript library which provides a lot of integrated functionality. I put this small script together to provide a zoom preview of an image by hovering the mouse over the image. The main purpose of this is to provide a means for displaying product image previews although I’m sure other uses could be found. The script automatically adjusts the size of the image to ensure that it fits within the document size. It also adjusts the position as necessary to ensure that the image doesn't end up outside of the window.

Demo

http://www.ceditmx.com/image-zoom-sample/

Download

http://www.ceditmx.com/downloads/image-zoom.zip

Requirements

JQuery 1.2+

Source Code:

this.imagePreview = function(){	
	xOffset = 10;
	yOffset = 30;	
	
	imgDiv = 2;

	
  $("a.preview").hover(function(e){  	
  	var img = new Image();		
  	$("#preview-image").remove();
  	
  	$("body").append('<div id="preview-image" style="display: none; position: absolute; z-index: 20000000;"></div>');  	
  	ptop = (e.pageY - xOffset);
	  pleft = (e.pageX + yOffset);
  	var iml = this.href
  	$("#preview-image").html('');
  	$("#preview-image")  	
			.css("top", ptop + "px")
			.css("left", pleft + "px")
	
			.show();			
		$("#preview-image").addClass('loading');			
		
		$(img)		
		  .load(function(){
				$(this).hide();
				$("#preview-image")
				  .removeClass('loading')
				  .html('')
				  .append(this);
				if (img.width > $(window).width() && img.height > $(window).height()){					
					
					xDif = (img.width - $(window).width());					
					yDif = (img.width - $(window).height());
					if (xDif > yDif) {						
						img.width = ($(window).width()-($(window).width()/2));
					} else {
						
						img.height = ($(window).height() - ($(window).height()/2))
					}
				} else if (img.width > $(window).width()){					
					img.width = ($(window).width() - ($(window).width()/2))
				} else if (img.height > $(window).height()){
					
					img.height = ($(window).height() - ($(window).height()/2))
				} 
				// adjust the width and height attributes
			  
				$(this).fadeIn("fast");
				if (((ptop + $("#preview-image").height())-$(window).scrollTop()) > $(window).height()){
					// Find a placement where it won't fall below the window
		  		ptop = ($(window).height()-($("#preview-image").height())) + $(window).scrollTop();		  
				} 		
				if (ptop < $(window).scrollTop()){
					ptop = $(window).scrollTop();
				}						
				if ((pleft + $("#preview-image").width()) > $(window).width()){
					pleft = ($(window).width()-$("#preview-image").width());
					//pleft = $(window).width()-img.width;
				}		
				$("#preview-image")
					.css("top",ptop + "px")
					.css("left",pleft + "px");				
				
		 })
		 .attr('src', iml);		 
	}, function(){
		$("#preview-image").hide();
		$("#preview-image").remove();
  });
	
	$("a.preview").mousemove(function(e){
		ptop = (e.pageY - xOffset);
		pleft = (e.pageX + yOffset);		
		if (((ptop + $("#preview-image").height())-$(window).scrollTop()) > $(window).height()){
			// Find a placement where it won't fall below the window
		  ptop = ($(window).height()-($("#preview-image").height())) + $(window).scrollTop();
		  
		} 		
		if (ptop < $(window).scrollTop()){
			ptop = $(window).scrollTop();
		}		

		if ((pleft + $("#preview-image").width()) > $(window).width()){
			pleft = ($(window).width() - $("#preview-image").width());
			if ((e.pageX + xOffset) > pleft && (e.pageX + xOffset)  < (pleft + $("#preview-image").width())){
				ptop = e.pageY + yOffset;
			}			
			//pleft = $(window).width()-img.width;
		}
		$("#preview-image")
			.css("top",ptop + "px")
			.css("left",pleft + "px");
	});	
		
};

// starting the script on page load
$(document).ready(function(){
	imagePreview();
});

Using the Code: