4

I've got a 'magnifying' div (.large) that's attached to the mousemove event but the underlying content remains clickable.

jsfiddle

I'm struggling to find a way to scale the underlying div within the magnifying zoom without building the div twice, scaling one version up and bounding it within .large (typical jquery zoom plugins seem to have a small image on the page and a larger image revealed on hover). This seems like a convoluted method to me, can't I just alter the pixel ratio within the .large div (less logical pixels per physical pixel?) and create a localized zoom effect - is this possible?

NOTE: Similar set up in the question asked here (but the content is cloned and hidden, I'd like to avoid this) .

HTML:

  <div class="magnify">
    <img class="small" src="http://placehold.it/300x150" width="400"/> 
    <a href="#" target = "_blank" style="position:absolute;left:50%;top:40%;width:20px;height:20px;border:5px solid red; border-radius:10px">Demo clickable link</a>
  <div class="large"></div>
  </div>
  <p id="demo"></p>

CSS:

   .magnify {width: 900px; margin: 50px auto; position: relative;border:1px solid red;}
   .small { display: block; width:900px;}

   .large {
    width: 275px; height: 275px;
    position: absolute;
    border-radius: 100%;

    pointer-events:none; /* allows user to click through the div to 
                     underlying content */   
    }

JS:

$(document).ready(function(){

$(".magnify").mousemove(function(e){

    x = e.clientX;
    y = e.clientY;
    coor = "Coordinates: (" + x + "," + y + ")";
    document.getElementById("demo").innerHTML = coor;


    var magnify_offset = $(this).offset();
    var mx = e.pageX - magnify_offset.left;
    var my = e.pageY - magnify_offset.top;

    //fade out the glass if the mouse is outside the container
    if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
    {
        $(".large").fadeIn(100);
    }
    else
    {
        $(".large").fadeOut(100);
    }
    if($(".large").is(":visible"))
    {
        //move the magnifying glass with the mouse
        var px = mx - $(".large").width()/2;
        var py = my - $(".large").height()/2;

        $(".large").css({left: px, top: py});
    }
})
})
Community
  • 1
  • 1
Liz
  • 1,421
  • 5
  • 21
  • 39
  • Afaik, no. You can scale contents of a div using CSS [zoom](http://css-tricks.com/almanac/properties/z/zoom/), but that does not apply to contents underneath the zooming div. Here's a quick (malfunctioning) [demo](http://jsfiddle.net/dBfr2/1/). – Kiruse Jul 14 '14 at 08:59
  • Check if this helps:[Link](http://www.developerdrive.com/2012/02/scaling-web-page-elements-using-the-css3-scale-transform/) – Sunil Hari Jul 14 '14 at 09:50
  • What I'm asking is if I can get away with *not* using css scale transform! I don't want to have to duplicate the div and scale it up, rather I want to change the screen pixel ratio within the bounds of the outer div to create the same effect. – Liz Jul 15 '14 at 02:11
  • 1
    http://jsfiddle.net/gthomas3/tvth7fqx/ – Graham T Oct 07 '14 at 11:56
  • very cool @GrahamT although it needs some offset applied when the user scrolls down for the magnified region to be in the correct place – Liz Oct 17 '14 at 06:27

1 Answers1

1

You can't skip the "scale transform + duplicate" part when you need to scale HTML elements within div.

If u need only the image you can create some magic there with CSS background position, but larger image will be needed.

Another thing that you can do is to use CANVAS ZOOM approach.

Btw this is impossible "...change the screen pixel ratio within the bounds of the outer div..."

Community
  • 1
  • 1
Sams
  • 684
  • 1
  • 8
  • 14