Image Zoom On Mouser Hover And Move - jQuery ZoomIt

ZoomIt is a really small JQuery plugin that provides an inner zoom functionality on your image when mouse hover and move.

How to use it:

1. Include both jQuery library (slim build) and the jQuery ZoomIt plugin's script at the bottom of the html page.

<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="zoomit.jquery.js"></script>

2. Wrap the original and zoomed images into a DIV container as follow:

<div class="zoomit-wrapper">
  <img src="small.jpg" 
       data-zoomed="original.jpg"
  >
</div>

3. The required CSS styles for the image zoom plugin.

.zoomit-wrapper img { vertical-align: top; }

.zoomit-container {
  overflow: hidden;
  position: relative;
  vertical-align: top;
  display: inline-block;
}

.zoomit-ghost {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: block;
  position: absolute;
  cursor: wait;
}

.zoomit-container.loaded .zoomit-ghost { cursor: crosshair; }

.zoomit-zoomed {
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 5;
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  transition: all 0.1s;
}

.zoomit-container.loaded .zoomit-zoomed { opacity: 1; }

4. Call the function on the img tag to active the plugin.

$('img').zoomIt();

5. All configuration options.

$('img').zoomIt({
enabled: 1,
status: 0,
loaded: 0,
img: $(this),
offset: [0,0],
class: {
  container: 'zoomit-container',
  loaded: 'loaded',
  img: 'zoomit-zoomed',
  ghost: 'zoomit-ghost'
},
// Get image src
src: function () {
  return this.img.data('zoomed')
},
// Get zoom image src
getSrc: function () {
  return typeof this.src == 'function' ? this.src() : this.src;
},
// Image HTML
imgTag: null
});

Change log:

2017-03-12

• Fixed for iOS.

2017-03-09

• Added CSS to disable user select

2017-03-07

• JS update

---

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