Question

I have an image! When the mouse hovers over the image, is it possible for jQuery (or CSS!) to “detect” an area around the mouse, capture the image underneath, and then zoom that image?

So! Unlike the jQuery zooms I’ve seen online, where there are two images – small and large – this one doesn’t use any fancy algorithm to work out where the mouse is in relation to the small, and then show that section of the large.
Instead, this would presumably use a fancy algorithm to catch the area around the mouse, and then blow it up!

If there is a plugin that does this, that would be wizard. If not, does anyone know if it is possible to :

a. capture the screen around the mouse using jQuery/JavaScript/CSS/HTML5?
b. blow up a captured image using jQuery?

Answer 1

Here is some code I wrote a while ago to “zoom” thumbnail images for a slideshow:

$(function () {
    $('#container-id').bind('mousewheel', function (event, delta) {
        event.preventDefault();
        var sc = $.data(this, 'scale');
        if ((delta == 1 && sc < 5) || (delta == -1 && sc > 1)) {
            sc += delta;
            $.data(this, 'scale', sc);
            $(this).find('img').css({
                WebkitTransform : 'scale(' + sc + ')',
                   MozTransform : 'scale(' + sc + ')',
                    MsTransform : 'scale(' + sc + ')',
                     OTransform : 'scale(' + sc + ')',
                      Transform : 'scale(' + sc + ')'
            });
        }
    }).bind('mousemove', function (event) {
        //only run the code if the thumbnail is zoomed in, otherwise there is no point in doing these calculations
        var sc = $.data(this, 'scale') || 1;//scale
        if (sc > 1) {
            var $this = $(this),
                X  = (typeof(event.offsetX) == 'undefined') ? (event.pageX - $this.offset().left) : (event.offsetX),//current cursor X position in bullet element
                Y  = (typeof(event.offsetY) == 'undefined') ? (event.pageY - $this.offset().top) : (event.offsetY),//current cursor Y position in bullet element
                w  = 100,//width of a thumbnail
                h  = 100,//height of a thumbnail
                nX = ((w / 2) - X),//new X
                nY = ((h / 2) - Y),//new Y
                tf = 'translate(' + (nX * (sc - 1)) + 'px, ' + (nY * (sc - 1)) + 'px) scale(' + sc + ')';//transform string
            $this.find('img').css({
                WebkitTransform : tf,
                   MozTransform : tf,
                    MsTransform : tf,
                     OTransform : tf,
                      Transform : tf
            });
        }
    }).bind('mouseleave', function () {
        //reset .has-thumb element on mouseleave
        $.data(this, 'scale', 5);
        $(this).find('.thumb-image').css({
            WebkitTransform : 'translate(0, 0) scale(1)',
               MozTransform : 'translate(0, 0) scale(1)',
                MsTransform : 'translate(0, 0) scale(1)',
                 OTransform : 'translate(0, 0) scale(1)',
                  Transform : 'translate(0, 0) scale(1)'
        });
    });
    $.data($('#container-id')[0], 'scale', 5);
});

Sample HTML looks like this:

<div id="container-id">
    <img src="..." />
</div>

And some CSS to wrap-it-up:

#container-id {
    width  : 100px;
    height : 100px;
    overflow : hidden;
}
#container-id img {
    width  : 100px;
    height : 100px;
}

Here is a demo: http://jsfiddle.net/Bbsze/1/

If you are interested in this code I can write-up some documentation to make it a bit more clear. Also note that this code leverages the CSS3 transform property so old browsers would need a little more code.