Question

Actually I’m looking for a jQuery plug-in that can handle this:

• there is a container with overflow hidden
• inside of this is another one, which is way larger
• when i move over the div, the part I’m seeing depends on my current position
  • when I’m in the left top corner I see the top left corner of the inner container
  • when I’m in the middle i see the middle of the container …

I wrote a little JavaScript that does that:

this.zoom.mousemove( function(event) {

    var parentOffset    = $(this).parent().offset(); 
    var relativeX       = event.pageX - parentOffset.left;
    var relativeY       = event.pageY - parentOffset.top;

    var differenceX     = that.zoom.width() - that.pageWidth;
    var differenceY     = that.zoom.height() - that.pageHeight;

    var percentX        = relativeX / that.pageWidth;
    var percentY        = relativeY / that.pageHeight;

    if (1 < percentX) {
        percentX        = 1;
    }
    if (1 < percentY) {
        percentY        = 1;
    }

    var left            = percentX * differenceX;
    var top             = percentY * differenceY;

    that.zoom.css('left', -left).css('top', -top);

});

But this isn’t very smooth and kinda jumpy, when you enter from another point of the container. So, before reinventing the wheel: Is there one plug in, that does exactly that and has iOS support (drag instead of mouse move)? All zoom plug ins (like Cloud Zoom) are over the top for this purpose and most have no support for dragging on iOS.

And if there’s not something like this. How can I make this smoother and cooler. Any approach would be helpful. 🙂

Many thanks.

Answer 1

So, here is my solution – which works pretty well and is easy to achieve. There could be done some improvement, but to get the idea i’ll leave it that way. 🙂

there is a demo on jsfiddle:

http://jsfiddle.net/insertusernamehere/78TJc/

CSS

<style>
    div.zoom_wrapper {
        position:   relative;
        overflow:   hidden;
        width:      500px;
        height:     500px;
        border:     1px solid #ccc;
        cursor:     crosshair;
    }
    div.zoom_wrapper > * {
        position:   absolute;
    }
</style>

HTML

<div class="zoom_wrapper">
    <img id="zoom" src="http://lorempixel.com/output/people-q-c-1020-797-9.jpg" alt="">
</div>

JAVASCRPT

<script>

    var zoom        = null;

    // this function will work even if the content has changed
    function move() {

    // get current position
    var currentPosition = zoom.position();
    var currentX        = currentPosition.left;
    var currentY        = currentPosition.top;

    // get container size
    var tempWidth       = zoom.parent().width();
    var tempHeight      = zoom.parent().height();

    // get overflow
    var differenceX     = zoom.width() - tempWidth;
    var differenceY     = zoom.height() - tempHeight;

    // get percentage multiplied by difference (in pixel) cut by percentage (here 1/4) that is used as "smoothness factor"
    var tempX           = zoom.data('x') / tempWidth * differenceX / 4;
    var tempY           = zoom.data('y') / tempHeight * differenceY / 4;

    // get real top and left values to move to and the last factor slows it down and gives the smoothness (and it's corresponding with the calculation before)
    var left            = (tempX - currentX) / 1.25;
    var top             = (tempY - currentY) / 1.25;

    // finally apply the new values
    zoom.css('left', -left).css('top', -top);   

}

$(document).ready(function () {

    zoom    = $('#zoom');

    //handle mousemove to zoom layer - this also works if it is not located at the top left of the page
    zoom.mousemove( function(event) {
        var parentOffset    = $(this).parent().offset(); 
        zoom.data('x', event.pageX - parentOffset.left);
        zoom.data('y', event.pageY - parentOffset.top);
    });

    // start the action only if user is over the container
    zoom.hover(
        function() {
            zoom.data('running', setInterval( function() { move(); }, 30) );
        },
        function() {
            clearInterval(zoom.data('running'));
        }
    );

});

</script>

Note:
This one has, of course, no support for touch devices. But for that I use (again)/I can recommend the good old iScroll … 🙂