Im building a custom WordPress theme for a client who wants a magnifier glass over the images on the front page but for some reason I cannot get it to work.
Here is the code I have..
$(document).ready(function(){
var native_height = 0;
var native_width = 0;
//Now the mousemove function
$(".magnify").mousemove(function(e){
if(!native_width && !native_height){
var image_object = new Image();
image_object.src = $(".small").attr("src");
//The image gets loaded
native_width = image_object.width;
native_height = image_object.height;
} else {
var magnify_offset = $(this).offset();
var mx = e.pagex - magnify_offset.left;
var my = e.pagey - magnify_offset.top;
if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0){
$(".large").fadein(100);
} else {
$(".large").fadeout(100);
}
if($(".large").is(":visible")){
var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
var bgp = rx + "px" + ry + "px";
//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,backgroundPosition:bgp});
}
}
})
})
And the HTML…
<div id="fabricsblock">
<div class="fabrow">
<div class="fabcont">
<h1>Fabric 1</h1>
<div class="magnify">
<div class="large"></div>
<img class="img-responsive small" src="<?php echo get_template_directory_uri(); ?>/assets/fabrics/Jane-Fabrics-001.jpg" alt="Fabric 1" width="136" height="170">
</div>
</div>
<div class="fabcont"></div>
<div class="fabcont"></div>
<div class="fabcont"></div>
<div class="fabcont"></div>
</div>
</div>
The page does have these scripts as well in the head
ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js
www.myclientsite.co.uk/wp-includes/js/jquery/jquery.js?ver=1.12.4
www.myclientsite.co.uk/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1
if that helps
Thanks in advance guys!
Read more here: Magnifyer JS with Custom WordPress Theme