CSS3 image zoomer kaca pembesar

by Prasad Gavande

HTML

<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>

  <div id="wrap">

  	<h1>Super Cool Magnifying Glass For Image Zoom</h1>

    <h2>Demo</h2>

    <div class="product"><img class="magniflier" src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="300"/></div>
    <div class="product"><img class="magniflier" src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="300"/></div>
    <div class="product"><img class="magniflier" src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="300"/></div>


    <h2>Usage</h2>

		<p><a href="http://codetheory.in/image-zoom-magnifying-glass-effect-with-css3-and-jquery/">Read this Article</a></p>

  </div>

  <!-- Time for jquery action -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

CSS

.glass {
  width: 175px;
  height: 175px;
  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);
  
  /* hide the glass by default */
  display: none;
}





/*********
*** Styles just for DEMO purpose
*********/

body{
	background: black url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/wild_oliva.png);
	font-family: 'ubuntu', arial, verdana;
	color: #fff;
	font-size: 14px;
}

#wrap {
	max-width: 700px;
	margin: 20px auto;
}

.product {
	margin: 20px auto;
	text-align: center;
	padding: 20px;
}

h1, h2, h3 {
	text-align: center;
	margin: 50px 0;
	font-size: 30px;
	color: #fff;
	text-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
}

h2 {
	font-size: 26px;
	margin: 25px 0;
}

a {
	color: white;
}

JavaScript

/*JS Magnifier5*/


$(function() {

  var native_width = 0;
  var native_height = 0;
  var mouse = {x: 0, y: 0};
  var magnify;
  var cur_img;

  var ui = {
    magniflier: $('.magniflier')
  };

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

...