Javascript magnifying glass for a set of figures - cross-browser compatibility

Question

I have searched for magnifying glasses on the web, but usually they only work for one picture. So, I have built a magnifying glass that magnifies all the pictures in a specific div. It works well on Chrome browser, but it gives strange effects on Firefox and Opera browsers.

Can anyone help me in reaching a magnifying glass cross-browser compatible?

My code is:

<style type="text/css">
#banners_magnifying{
    left: 0px;
    border-radius: 100%;
    border: 0px solid;
    width: 40px;
    height: 40px;
    overflow: hidden;
    position: absolute;
    zoom: 400%;
    -moz-transform: scale(4);
/*multiple box shadows to achieve the glass effect*/
    box-shadow: 0 0 0 4px #000000,  0 0 1px 2px rgba(0, 0, 0, 0.25),  inset 0 0 20px 2px rgba(0, 0, 0, 0.7);
    z-index: 1;
    cursor: pointer;
    visibility: hidden;
}
</style>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
//$(document).ready(function(){
var scale=4;
var diameter=40;

$("#banners_magnifying").html($("#banners").html());
$("#banners_magnifying img").each(function(index) {
    var the_offset=$(this).offset();
    $(this).attr("left_i", the_offset.left);
    $(this).attr("top_i", the_offset.top);
});


var mousex, mousey;

function get_mouseXY(e){            // this works on IE, FF, mozilla, opera, and NS
    if (!e) e = window.event;
    if (e){
        if (e.pageX || e.pageY){
            // this doesn't work on IE! (it works on the other browsers)
            mousex = e.pageX;
            mousey = e.pageY;
        }
        else if (e.clientX || e.clientY){
            // this works on IE, FF, mozilla, opera, and NS
            mousex = e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
            mousey = e.clientY+document.body.scrollTop+document.documentElement.scrollTop;
        }
    }
//  mousex-=fig_x;
//  mousey-=fig_y;
}


$(document).mousemove(function(event){
        var my_canvas=$("#banners");
        var the_offset=my_canvas.offset();
    
        get_mouseXY(event);
        banners_magnifying=$("#banners_magnifying");

        $("#coordinates").text((mousex-the_offset.left) + ", " + (mousey-the_offset.top) + ".");
    
        if ((mousex>0) && (mousex<(the_offset.left+my_canvas.width())) && (mousey>0) && (mousey<(the_offset.top+my_canvas.height()))){
            banners_magnifying.css("visibility", "visible");
        }
        else{
            banners_magnifying.css("visibility", "hidden");
        }

        banners_magnifying.css("left", mousex/scale-diameter/2);
        banners_magnifying.css("top", mousey/scale-diameter/2);

        $("#banners_magnifying img").each(function(index) {
//alert(index+": " + $(this).attr("src"));
            var delta_x=+diameter/4;
            var delta_y=+diameter/4;
            $(this).css("left", $(this).attr("left_i")-event.pageX+delta_x+diameter/scale);
            $(this).css("top", $(this).attr("top_i")-event.pageY+delta_y+diameter/scale);

        });
});
});
</script>


<div id="banners" style="width:640px; height:320px; position: absolute; left:0px; top:0px;">
    <img src="http://lardopikachu.home.sapo.pt/imagens/gifs_animados/raichu1.gif" style="position: absolute;">
    <img src="https://pokemeublog.files.wordpress.com/2014/02/abf9c-pikachu2b12-bmp.jpg?w=100" style="position: absolute; left:100px; top:40px;">
</div>
<div id="banners_magnifying">
</div>
<p>mouse is at coordinates: <span id="coordinates">...</span></p>

A jsfiddle containing this code is at: https://jsfiddle.net/sjg6w1zx/ Thank you.

EDIT: the images were replaced since the original post, to avoid broken links, and this contains a set of two figures: one common and one with transparent background.

PS. I've tried to changed the lines about zoom-in to:

-moz-zoom: 4;
-ms-zoom: 4;
-webkit-zoom: 4;
-moz-transform: scale(4);
-ms-transform: scale(4);
-webkit-transform: scale(4);
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-webkit-transform-origin: left top;

and I've removed the line:

zoom: 400%;

Then, the magnifying glass has the same size across all browsers, but the images are not zoomed-in properly, even with other formulas taking into account the different zones.

Answer 1

That's interesting...

It seems that in Firefox/Opera setting left and top properties depends on the 'zoom' property while in Chrome doesn't.

So, as you already pointed, should avoid this 'zoom' property and make it with transforms.

Also, you could wrap your images in a div and position it according with the mouse position so you avoid the foreach.

Try something like this:

//$(document).ready(function(){
var scale=4;
var diameter=40;

$("#banners_magnifying").html("<div id='mcontainer'>"+$("#banners").html()+"</div>");
$("#banners_magnifying img").each(function(index) {
    var the_offset=$(this).offset();
    $(this).attr("left_i", the_offset.left);
    $(this).attr("top_i", the_offset.top);
});


var mousex, mousey;

function get_mouseXY(e){            // this works on IE, FF, mozilla, opera, and NS
    if (!e) e = window.event;
    if (e){
        if (e.pageX || e.pageY){
            // this doesn't work on IE! (it works on the other browsers)
            mousex = e.pageX;
            mousey = e.pageY;
        }
        else if (e.clientX || e.clientY){
            // this works on IE, FF, mozilla, opera, and NS
            mousex = e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
            mousey = e.clientY+document.body.scrollTop+document.documentElement.scrollTop;
        }
    }
//  mousex-=fig_x;
//  mousey-=fig_y;
}


$(document).mousemove(function(event){
        var my_canvas=$("#banners");
        var the_offset=my_canvas.offset();
    
        get_mouseXY(event);
        banners_magnifying=$("#banners_magnifying");

        $("#coordinates").text((mousex-the_offset.left) + ", " + (mousey-the_offset.top) + ".");
    
        if ((mousex>0) && (mousex<(the_offset.left+my_canvas.width())) && (mousey>0) && (mousey<(the_offset.top+my_canvas.height()))){
            banners_magnifying.css("visibility", "visible");
        }
        else{
            banners_magnifying.css("visibility", "hidden");
        }
	
        banners_magnifying.css("left", mousex-diameter*2);
        banners_magnifying.css("top", mousey-diameter*2);


        $("#mcontainer").css("left",-mousex+diameter/2);
        $("#mcontainer").css("top", -mousey+diameter/2);
});
//});

#banners_magnifying{
    left: 0px;
    border-radius: 100%;
    border: 0px solid;
    width: 40px;
    height: 40px;
    overflow: hidden;
    position: absolute;
    -moz-zoom: 4;
    -ms-zoom: 4;
    -webkit-zoom: 4;
    -moz-transform: scale(4);
    -ms-transform: scale(4);
    -webkit-transform: scale(4);
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -webkit-transform-origin: left top;
/*multiple box shadows to achieve the glass effect*/
    box-shadow: 0 0 0 4px #000000,  0 0 1px 2px rgba(0, 0, 0, 0.25),  inset 0 0 20px 2px rgba(0, 0, 0, 0.7);
    z-index: 1;
    cursor: pointer;
    visibility: hidden;
}
#mcontainer{
  position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banners" style="width:640px; height:320px; position: absolute; left:0px; top:0px;">
    <img src="http://lardopikachu.home.sapo.pt/imagens/gifs_animados/raichu1.gif" style="position: absolute;">
    <img src="https://pokemeublog.files.wordpress.com/2014/02/abf9c-pikachu2b12-bmp.jpg?w=100" style="position: absolute; left:100px; top:40px;">
</div>
<div id="banners_magnifying">
</div>
<p>mouse is at coordinates: <span id="coordinates">...</span></p>