Image zoom effect?

Question

Imagine a bunch of images that appear far off in the distance, and wherever you click, it zooms in closer using the mouse X,Y as an anchor point. So basically all the images, however they're arranged (probably in separate DIVs though), all zoom in together seamlessly as if a camera has zoomed in on a collage.

I'm having trouble thinking of how the heck this would be done in jQuery. Any suggestion? CSS3 animated transitions maybe? NOTE: image quality must be fully retained upon zoom

Answer 1

It's a fairly new standard, but with CSS's zoom attribute, you can zoom in on page contents, or even a particular element, with just a little javascript.

This example will expand the wrapper element and all its contents whenever the page is clicked.

<div id="wrapper">

    <div id="someContent"></div>
    <img src="img.png" />

</div>

<script>

    document.body.addEventListener
    ("click", function(){zoom(document.getElementById("wrapper"))}, true);

    function zoom(elem) {

        var zAtt = parseFloat(elem.style.zoom);
        if(isNaN(zAtt)) zAtt = 100;

        zAtt+=4;

        console.log(zAtt);
        console.log(elem);

        elem.style.zoom = zAtt + "%";


    }

</script>