Is there a way to create a magnifying effect without duplicating content and still keep the underlying elements clickable?
Check out this jsfiddle example
I am looking for a solution to scale the underlying div within the magnifying zoom without cloning it. Can the pixel ratio be altered within the large div to achieve a localized zoom effect? Is this feasible?
NOTE: A similar scenario is discussed in this question, but I want to avoid cloning and hiding content.
Example 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>
Corresponding 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 */
}
JavaScript Functions:
$(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});
}
})
})