Magnifier

Does not work in Android

by Prasad Gavande

HTML

<div style="border: 1px solid red; margin: 20px; padding: 10px; font-size: 0.4em;">
    <h3>Some dummy content</h3>

    <p>
      a b c d e f g h i j k l m no p q r s t u v w x y z     1 2 3 4 5 6 7 8 9 0
    </p>
    </div>

    <img src="http://lorempixel.com/400/200/sports/1" alt="sample image" />

CSS

html {
  background-color: #333;
  color: #FFF;
}

.magnifying_glass {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0px;
  left: 0px;
  overflow: hidden;

  border-radius: 100px; /* Half glass max width height */
  -moz-border-radius: 100px; /* Half glass max width height */

  border: 1px solid white;
  background-color: white;

}

.magnifying_glass .magnified_content {

  margin-left: -100px; /* Half glass width */
  margin-top: -100px; /* Half glass height */

  overflow: visible;

  position: absolute;

  transform:scale(2);
  -moz-transform:scale(2);

  transform-origin: left top;
  -moz-transform-origin: left top;

  }

.magnifying_glass .magnifying_lens {

  width: 100%;
  height: 100%;

  opacity: 0.0;


  background-color: white;
  cursor: default;
}

JavaScript

/*JS Magnifier3*/

$(document).ready(function() {
      var scale = 2;

      var $magnifyingGlass = $('<div class="magnifying_glass"></div>');
      var $magnifiedContent = $('<div class="magnified_content"></div>');
      //var $magnifyingLens = $('<div class="magnifying_lens"></div>');

      //setup
      $magnifiedContent.css({
        backgroundColor: $("html").css("background-color") || $("body").css("background-color"),
      });
      $magnifiedContent.html($(document.body).html());

      $magnifyingGlass.append($magnifiedContent);
      //$magnifyingGlass.append($magnifyingLens); 
      $(document.body).append($magnifyingGlass);

      //funcs
      function updateViewSize() {
        $magnifiedContent.css({width: $(document).width(), height: $(document).height()});
      }

      //begin
      updateViewSize();

      //events
      $(window).resize(updateViewSize);

      $magnifyingGlass.mousedown ( function(e) {
        e.preventDefault();
        $(this).data("drag", {mouse: {top: e.clientY, left: e.clientX}, offset: {top: $(this).offset().top, left: $(this).offset().left}});
      });

      $(document.body).mousemove( function(e) {
        if ($magnifyingGlass.data("drag")) {
          var drag =$magnifyingGlass.data("drag");
          var left = drag.offset.left + (e.clientX-drag.mouse.left);
          var top = drag.offset.top + (e.clientY-drag.mouse.top);

          $magnifyingGlass.css({left: left, top: top});
          $magnifiedContent.css({left: -left*scale, top: -top*scale});
 
        }
      });
      $(document.body).mouseup(function() {
        $magnifyingGlass.removeData("drag");
      });
    });