JQUERY I CSS3 MAGNIFYING GLASS

Idea came by surfing web http://mix--er.blogspot.com/2014/01/jquery-i-css3-lupa-magnifying-glass-za.html

HTML

<img class="magniflier" src="http://4.bp.blogspot.com/-Qz-_RUSyXZo/UsdMfAz96jI/AAAAAAAARI8/qVzSQxXDsIg/s1600/iphone-5-thumb%5B1%5D.jpg" width="460"/>

CSS

.glass {
  width: 170px;
  height: 170px;
  position: absolute;
  border-radius: 50%;
  cursor: crosshair;

  /* Multiple box shadows to achieve the glass effect */
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25),
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    display: none;
}

JavaScript

$(function() {
  var native_width = 0;
  var native_height = 0;
  var mouse = {x: 0, y: 0};
  var magnify;
  var cur_img;
  var ui = {
    magniflier: $('.magniflier')
  };
  // Connecting to the magnifying glass
  if (ui.magniflier.length) {
    var div = document.createElement('div');
    div.setAttribute('class', 'glass');
    ui.glass = $(div);
    $('body').append(div);
  }
 
  // All the magnifying will happen on "mousemove"
  var mouseMove = function(e) {
    var $el = $(this);
    // Container offset relative to document
    var magnify_offset = cur_img.offset();
    // Mouse position relative to container
    // pageX/pageY - container's offsetLeft/offetTop
    mouse.x = e.pageX - magnify_offset.left;
    mouse.y = e.pageY - magnify_offset.top;
   
    // The Magnifying glass should only show up when the mouse is inside
    // It is important to note that attaching mouseout and then hiding
    // the glass wont work cuz mouse will never be out due to the glass
    // being inside the parent and having a higher z-index (positioned above)
    if (
      mouse.x < cur_img.width() &&
      mouse.y < cur_img.height() &&
      mouse.x > 0 &&
      mouse.y > 0
      ) {
      magnify(e);
    }
    else {
      ui.glass.fadeOut(100);
    }
    return;
  };
  var magnify = function(e) {
    // The background position of div.glass will be
    // changed according to the position
    // of the mouse over the img.magniflier
    //
    // So we will get the ratio of the pixel
    // under the mouse with respect
    // to the image and use that to position the
    // large image inside the magnifying glass
    var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;
    var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;
    var bg_pos = rx + "px " + ry + "px";
   
    // Calculate pos for magnifying glass
    //
    // Easy Logic: Deduct half of width/height
    // from mouse pos.
    // var glass_left =...