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