Search code examples
javascriptjqueryzoomingmouse-position

elevatezoom mouse position — the struggle is real

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
Solution

  • 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