Magnifying Glass

A CSS3/HTML5 magnifying glass. Suitable for examing images and pixel-peeping.

by Jérôme Sengel

HTML

<footer> <small>&copy; Copyright Alex Tan Hong Pin, #amalaysianprogrammer</small>

</footer>
<div id='macro'></div>
<div id='zoom'></div>

CSS

div#macro {
      position: fixed;
      background-image: url(http://farm6.staticflickr.com/5545/11986850956_d141f71844_b.jpg);
      height: 255px;
      width: 382px;
      background-size: contain;
      /* box-shadow: 10px 10px 10px #444444; */
      top: 50%;
      left: 50%;
      margin-top: -127px;
      margin-left: -191px;
  }
  div#zoom {
      position: relative;
      background-image: url(http://farm6.staticflickr.com/5545/11986850956_d141f71844_b.jpg);
      background-color: #dddddd;
      background-position: -100px -100px;
      background-repeat: no-repeat;
      height: 200px;
      width: 200px;
      border-radius: 50%;
  
  }

JavaScript

var mouse = null;
  var $zoom = $('div#zoom');
  var $macro = $('div#macro');
  var image = new Image();
  var oriX = null,
      oriY = null,
      resizedX = $macro.width(),
      resizedY = $macro.height();
  image.src = 'http://farm6.staticflickr.com/5545/11986850956_d141f71844_b.jpg';
  image.onload = function () {
      oriX = image.width;
      oriY = image.height;
  }



  document.onmousemove = function (event) {
      mouse = {
          x: event.pageX,
          y: event.pageY,
          offsetX: event.pageX - 105,
          offsetY: event.pageY - 105,
          corrX: event.pageX - $macro.position().left + resizedX / 2,
          corrY: event.pageY - $macro.position().top + resizedY / 2
      }

      if (mouse.corrX > 0 && mouse.corrX < resizedX && mouse.corrY > 0 && mouse.corrY < resizedY) {
          var x = -(mouse.corrX / resizedX) * oriX + resizedX / 4;
          var y = -(mouse.corrY / resizedY) * oriY + resizedY / 4;
          $('#debug2').text('x ' + x + ' y ' + y);
          var bp = x + 'px ' + y + 'px';

          $zoom.css('opacity', '1').css('background-position', bp);
          $zoom.css('top', mouse.offsetY).css('left', mouse.offsetX);
      } else {
          $zoom.css('opacity', '0');
      }

  }