Move zoomed image on mousemove

Question

I'm creating my own zoom functionality. I swap out the image for a x2 size image which is supposed to be moveable on click. The movement is giving me trouble though. I've cobbled together some code from around the net. It works but not only moves left and down. I'd like it to move with the mouse and the image is centered on the mouse and also constrain to the dimensions of the element enclosing it. Anyone have any thoughts? Link: http://bigideaadv.com/pic_site/?p=95

    jQuery("div.zoom2 img.rsImg2").mousemove(function(e) {
        var zoom = jQuery(this);
        var position = zoom.position();

        //console.log(position);

        jQuery(".rsImg2").css({"left" : position.left, "top" : position.top});

        // the first parameter (e) is automatically assigned an event object

        var parentOffset = jQuery(this).parent().offset();
        //or $(this).offset(); if you really just want the current element's offset
        var relX = e.pageX - parentOffset.left;
        var relY = e.pageY - parentOffset.top;

        jQuery(".rsImg2").css({"left" : relX, "top" : relY});
    });

Answer 1

It's hard to debug this on your site, it would help if you can create a jsFiddle of this.

However, I think the problem is that you're changing the position of the img that is firing the mousemove event. This moves the img element away from the mouse cursor and so the event will no longer fire unless you move back into the img (to the right or down).

Instead, try firing the event on the parent

jQuery("div.zoom2").mousemove(function(e) {

You'll have to modify some of the jQuery to point to the right elements. Also, are you sure you don't want to set the negative of the cursor movement? Like so:

jQuery(".rsImg2").css({"left" : -relX, "top" : -relY});

Or something akin to this. Play around with it. If you create a jsFiddle, we can help out a bit better =)

Good luck!