JavaScript Image zoom with CSS3 Transforms, How to calculate Origin? (with example)

Question

I'm trying to implement an image zoom effect, a bit like how the zoom works with Google Maps, but with a grid of fix position images.

I've uploaded an example of what I have so far here:

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

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

Use your mouse wheel to zoom in/out. The HTML source is basically an outer div with an inner-div, and that inner-div contains 16 images arranged using absolute position. It's going to be a Photo Mosaic basically.

I've got the zoom bit working using CSS3 transforms:

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

...however, I'm relying on the mouse X/Y position on the outer div to zoom in on where the mouse cursor is, similar to how Google Maps functions. The problem is that if you zoom right in on an image, move the cursor to the bottom/left corner and zoom again, instead of zooming to the bottom/left corner of the image, it zooms to the bottom/left of the entire mosaic. This has the effect of appearing to jump about the mosaic as you zoom in closer while moving the mouse around, even slightly.

That's basically the problem, I want the zoom to work exactly like Google Maps where it zooms exactly to where your mouse cursor position is, but I can't get my head around the Maths to calculate the transform-origin: X/Y values correctly. Please help, been stuck on this for 3 days now.

Here is the full code listing 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;
});

Yes you're right, it's just that I suck at Maths and can't quite work out the correct equation. I'll have another go at it tonight. I wasn't aware Seadragon had a pure JavaScript version of their Silverlight DeepZoom thing, I'll check that out, cheers! — Sunday Ironfoot
It's doable, but not straightforward. You'd have to keep track of the virtual pixel coordinates of the upper left corner of the entire mosaic to calculate where the mouse is on the mosaic. Another tough thing is that the moz-transform-offset specifies the center of the entire transform, but you want to apply incremental transformations to the center of transformation. — Daniel Beardsley

Sunday Ironfoot Sunday Ironfoot · Accepted Answer · 2010-05-28T06:57:24

Finally figured it out, check it out here:

http://www.dominicpettifer.co.uk/Files/Mosaic/MosaicTest.html

Use the mouse wheel to zoom, you can also drag the image about, only works properly on latest Safari, Opera and Firefox (images are blurry on Chrome for some reason). Also a bit buggy in certain areas. Got a lot of help someone at DocType http://doctype.com/javascript-image-zoom-css3-transforms-calculate-origin-example

JavaScript Image zoom with CSS3 Transforms, How to calculate Origin? (with example)

1 Answers