Show coordinates of large image

[grubbychicken]

Hi Mottie,

Thanks for the great plug-in.

I was just wondering if it would be possible to show the coordinates of the mouse within the LARGE image rather than the small.

I'm trying to allow the user to select an exact coordinate (pixel) from the large image, without displaying the image to the user at it's full resolution.

Thanks in advance for your help!

[Mottie]

Hi @grubbychicken!

It is possible! In this example, you listen for the mousemove event on the inner panel and update the edit window.

$(function() {
  $("#zoom").anythingZoomer({
    edit: true,
    initialized: function(e, zoomer) {
      zoomer.$inner.on('mousemove.showlarge', function() {
        // get updated zoomer data
        var zoomer = $('#zoom').data('zoomer'),
          largeX = zoomer.current[0] * zoomer.ratio[0],
          largeY = zoomer.current[1] * zoomer.ratio[1];
        zoomer.edit.html(Math.round(largeX) + ', ' + Math.round(largeY));
      });
    }
  });
});

[grubbychicken]

Thanks @Mottie for the quick response.

After implementing your suggestion, I'm still having problems. It seems like each pixel moved with the mouse (on both the x and y axis) jumps 3 pixels in coordinates. Please see my jsfiddle example here

It's like the mouse isn't tracking the 'true' coordinates within the larger image. Maybe this is something to do with my scaling...? I'm not absolutely sure.

Once again, thanks for your help

[Mottie]

Hmm, there are two problems...

• I linked to the wrong (older) demo where I used zoom and unzoom to add the code. It should only need to be added to the initialized callback. The comment has been updated.
• I thought I was seeing pixel perfect coordinates in the demo I shared, but apparently I was wrong... if you use the large image position to calculate the coordinates you get much better results.

updated demo

$(function() {
  $("#zoom").anythingZoomer({
    edit: true,
    initialized: function(e, zoomer) {
      zoomer.$inner.on('mousemove.showlarge', function() {
        var zoomer = $('#zoom').data('zoomer'),
          largeX = -parseInt(zoomer.$large.css('left'), 10) +
            zoomer.last[0]/2,
          largeY = -parseInt(zoomer.$large.css('top'), 10) +
            zoomer.last[1]/2;
        zoomer.edit.html(largeX + ', ' + largeY);
      });
    }
  });
});

[grubbychicken]

That does work much better, thanks for the updates. Although I'm still not able to select each individual pixel from the larger image.

i.e. I want to be able to select- X:100 Y:300 , X:101 Y:300 , X:102 Y:300 , X:103 Y:300 , X:104 Y:300 , X:105 Y:300 , X:106 Y:300

But at the moment I can only select pixels in increments of 3 - X:100 Y:300 , X:103 Y:300 , X:106 Y:300

I'm not sure if this is beyond the capabilities of the plugin and if I should try and find something else? If so, please let me know and I'll try and find another solution.

Thanks again!

[Mottie]

What do you mean by selecting pixels? Are you saying you want to use zoomAt using the large image dimensions?

As for the pixels being in increments of 3, I think it might have something to do with the difference in scale... the small to large scale ratio in that example is ~1.5x so it appears to be double that value. How sensitive is your mouse?

I'm sure there are more up-to-date image zoomers out there. This plugin is only different as it lets you zoom in on other content like text. There might be an image zoomer that provides better pixel perfect solutions, but I haven't looked in a while.

[grubbychicken]

Well I'm looking for a plugin that will allow my users to select an exact pixel from a high resolution image via coordinates. But the image displayed directly to the user is scaled to ensure it fits on the page correctly.

So they should be able to hover over the smaller image, which then gets magnified and displays a crosshair that allows them to "select" or choose a pixel from the large image using the coordinates.

Using my example from earlier, image resolution (2879px X 1915px) the user should be able to hover over the smaller image, which displays a magnifying glass (as your plugin already does) and within the magnifying glass should be a crop of the large image (at actual size), about 100px X 100px, which would allow the user to hover over each individual pixel of the larger image and eventually click to drop a crosshair and "select" a pixel from 2879 x 1915 (5,513,285) possibilities.

I'll have a look at other plugins too.

Thanks!