JavaScript Image zoom with CSS3 Transforms, how to calculate the origin? (with an example)

I am trying to implement an image zoom effect a bit similar to how the zoom works with Google Maps, but with a grid of fixed position images.

I downloaded an example of what I have so far:

http://www.dominicpettifer.co.uk/Files/MosaicZoom.html

(uses CSS3 transforms, so it only works with Firefox, Opera, Chrome or Safari)

Use the mouse wheel to zoom in / out. The HTML source is basically an outer div with an inner-div, and this inner-div contains 16 images arranged using an absolute position. Basically it will be a photomosaic.

I have a scaling bit working using CSS3 transforms:

$(this).find('div').css('-moz-transform', 'scale(' + scale + ')');

... however, I rely on the X / Y position of the mouse on the outer div to zoom in on the mouse cursor, similar to how Google Maps works. The problem is that if you enlarge the image to the right, move the cursor to the bottom / left corner and zoom in again, instead of moving closer to the bottom / left corner of the image, it will scale to the bottom / left side of the entire mosaic. This leads to a jump mosaic when you get closer while moving the mouse.

Basically the problem: I want the zoom to work just like Google Maps, where it scales exactly where the mouse pointer is, but I can’t go around the math to figure out the origin of the conversion: X / Y correctly. Please help stuck on this for 3 days.

Here is the complete list of codes for the mouse wheel event:

var scale = 1;

$("#mosaicContainer").mousewheel(function(e, delta)
{
    if (delta > 0)
    {
        scale += 1;
    }
    else
    {
        scale -= 1;
    }
    scale = scale < 1 ? 1 : (scale > 40 ? 40 : scale);

    var x = e.pageX - $(this).offset().left;
    var y = e.pageY - $(this).offset().top;

    $(this).find('div').css('-moz-transform', 'scale(' + scale + ')')
        .css('-moz-transform-origin', x + 'px ' + y + 'px');

    return false;
});
+3

Source: https://habr.com/ru/post/1745200/


All Articles