1

There are two image in my website, one is thumbnail and one is original photo, when I double click on the thumbnail , the original photo (it is larger than screen size) pop-out and shown. Currently I integrate an jquery.viewport plugin to let the user drag and view the photo.

The problem is, when I double click on the thumbnail , I would like to save the coordinate of the click , base on the coordinate to show the original photo.

That means, for example, If I double click on the left bottom of the thumbnail, when the original photo popout, it will shows at left bottom side as well, is it possible and are there any way to achieve this?

Thanks.

user782104
  • 13,233
  • 55
  • 172
  • 312
  • possible duplicate of [getting the X/Y coordinates of a mouse click on an image with jQuery](http://stackoverflow.com/questions/2159044/getting-the-x-y-coordinates-of-a-mouse-click-on-an-image-with-jquery) – DevlshOne Oct 10 '13 at 04:03
  • it is just getting xy, and I would like to show img according to xy, thanks – user782104 Oct 10 '13 at 05:07
  • Once you have X/Y, you relate it to the larger image and could even draw a rectangle in the larger image scaled down to the size of the thumbnail. Come on, man, we do expect you to use SOME of your own brain power. – DevlshOne Oct 10 '13 at 10:09

1 Answers1

1

Just use This :

$(document).ready(function() {
  $('img').click(function(e) {
    var offset = $(this).offset();
    alert(e.clientX - offset.left);
    alert(e.clientY - offset.top);
  });
});

Here is a live example : Example

amin
  • 1,194
  • 1
  • 12
  • 20