elevatezoom mouse position — the struggle is real

Question

I am using elevatezoom for a project and I need to get the mouse position while the picture is zoomed in. I tried a lot of different ideas but I always get undefined or NaN. Can you tell me why?

Look at this example:

$('#zoomPicture').elevateZoom({
  scrollZoom : true,
  zoomWindowFadeIn: 250,
  zoomWindowFadeOut: 500,
  responsive: true,
  easing: true,
  easingDuration: 50,
  borderSize: 1,
  zoomWindowWidth: 400,
  zoomWindowHeight: 400,
});

$("#zoomPicture").bind("click", function(e) {
  console.log(e.pageX);
  console.log(e.pageY);
}); // -> undefined

Isn’t it called `pageX` instead of `PageX` and `pageY` instead of `PageY`? — Sebastian Simon, Jul 08 '15 at 05:47
It is. But this does not solve the problem - still getting 'undefined' . Thanks for editing my post :) — a1xon, Jul 08 '15 at 05:51

score 1 · Accepted Answer · answered Jul 08 '15 at 05:53

1

Could you please let me know if the below code works for you

$(document).bind("click", "#zoomPicture", function(e) {
  console.log(e.pageX);
  console.log(e.pageY);
});

Does this link help you with your question: Understanding Event Delegation

answered Jul 08 '15 at 05:53

Daniel Netto

387
5
18

score 0 · Answer 2 · answered Jul 08 '15 at 05:56

The object ElevateZoom.self.nzOffset contain the x and y coordinates of the image.

You can see the values by using:

console.log( ElevateZoom.self.nzOffset );

With this information you can implement the jQuery.on("click", function(){ //stuff here })

Hope I have helped.

Cya

elevatezoom mouse position — the struggle is real

2 Answers2