jQuery Image Magnify v1.11 help

[armasmike]

1) Script Title: jQuery Image Magnify v1.11

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...agemagnify.htm

3) Describe problem: How can i make the image magnify where the mouse is and not center to the page height ?

[armasmike]

how about having it display at the top on the web page

[armasmike]

ok i found this that controls the image when you click on it.

var $clone=$target.clone().css({position:'absolute', visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)

how to i change this to display at the top of the page

[jscheuer1]

Find this section in the code (starting at about line #54):

		$target.bind('click.magnify', function(e){ //action when original image is clicked on
			var $this=$(this).css({opacity:setting.imgopacity})
			var imageinfo=$this.data('imgshell')
			jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images
			var $clone=imageinfo.$clone
			$clone.stop().css({zIndex:++jQuery.imageMagnify.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible', display:'block'})
			.animate({opacity:1, left:0, top:0, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
			function(){ //callback function after warping is complete
				//none added		
			}) //end animate
		}) //end click

See the highlighted line? Change both red values to 0 as shown. But if the page has scrolled, the larger image might not be seen once it gets to its destination.

If you still want it to go where the mouse is, we could probably work out a formula for that using the e.pageX and e.pageY (I think that's what jQuery calls them) visa vis half the target dimensions of the fully enlarged image. However, that would in some cases probably put portions of the enlarged image outside of the user's window.

I've gotta run right now. Try the above code modification first, just to see if it works.

[armasmike]

that worked but how can i get it to the top of the window.

so if i scroll down and click a pic it goes to the top of the page what about window.

[jscheuer1]

Instead of 0 for the top: thinger use jQuery(window).scrollTop():

.animate({opacity:1, left:0, top:jQuery(window).scrollTop(), width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,

[armasmike]

thank you