Magnifyer JS with Custom WordPress Theme

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..

  var native_height = 0;
  var native_width = 0;

  //Now the mousemove function
    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 -;

      if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0){
      } else {
        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;


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 class="fabcont"></div>
    <div class="fabcont"></div>
    <div class="fabcont"></div>
    <div class="fabcont"></div>

The page does have these scripts as well in the head

if that helps
Thanks in advance guys!

Read more here: Magnifyer JS with Custom WordPress Theme

Leave a Reply

Your email address will not be published. Required fields are marked *