PDA

View Full Version : jQuery Image Magnify v1.11 help



armasmike
06-13-2011, 04:16 PM
1) Script Title: jQuery Image Magnify v1.11

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm

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

armasmike
06-14-2011, 01:51 PM
how about having it display at the top on the web page

armasmike
06-14-2011, 02:32 PM
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
06-14-2011, 03:51 PM
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
06-14-2011, 04:42 PM
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
06-14-2011, 05:56 PM
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
06-17-2011, 04:07 PM
thank you