jQuery & CSS3 Based Image Magnifying Effect For Touch Devices - Touch Zoom

Touch Zoom is a tiny and mobile-first jQuery image zoom plugin allows you to apply a magnifying glass effect on an image when you tap/click on it.

How to use it:

1. Make sure to load the jQuery touch zoom plugin after loading jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/zoom.js"></script>

2. The Html structure.

<div id="zoom-container">
  <div class="base-image" id="base-image">
    <div id="zoom"></div>
  </div>
</div>

3. Add the base image and large image using CSS background property. The full CSS styles should be like this:

#base-image {
  width: 960px;
  height: 540px;
  background: url('images/base.jpg');
  margin: 50px auto;
  background-size: 960px 540px;
}

#zoom {
  background: url('images/zoom.jpg');
  display: none;
  position: fixed;
  height: 100px;
  width: 100px;
  background-repeat: no-repeat;
  /* Not sure how to deal with bottom edge, but no-repeat prevents weird repeating */
  background-position-y: 0%;
  background-position-x: 0%;
  z-index: 2;
  -webkit-transform: scale(2, 2);
  -moz-transform: scale(2, 2);
  -ms-transform: scale(2, 2);
  -o-transform: scale(2, 2);
  transform: scale(2, 2);
  -webkit-background-size: 960px 540px;
  -moz-background-size: 960px 540px;
  -o-background-size: 960px 540px;
  background-size: 960px 540px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
}

3. Adjust the zoom variables at the beginning of the zoom.js.

var zoomSize = 100;// Zoom Radius (Offset calculation. Standard size is at 100px circle)
var touchOffset = 70;// Manual Offset so that zoom window isn't on thumb
var pageYOffset = zoomSize/2;
var pageXOffset = zoomSize/2;

var pageYOffsetMobile = zoomSize/2;
var pageXOffsetMobile = zoomSize/2;

---

This awesome jQuery plugin is developed by jeffreyqua. For more Advanced Usages, please check the demo page or visit the official website.