jQuery Plugin For Image Hover Zoom - WM Zoom

File Size: 671 KB
Views Total: 21346
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin For Image Hover Zoom - WM Zoom

WM Zoom is a jQuery plugin that creates a magnifier overlay on top of your image and displays the high definition version beside it. Also provides a config to provide inner zoom functionality as you mouse hover the image.

How to use it:

1. Include the jquery.wm-zoom-1.0.min.css in the header and the jquery.wm-zoom-1.0.min.js in the footer but after the jQuery library.

<link rel="stylesheet" href="wm-zoom/jquery.wm-zoom-1.0.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="wm-zoom/jquery.wm-zoom-1.0.min.js"></script>

2. Add the small image and original image into your webpage.

<div class="wm-zoom-container demo">
  <div class="wm-zoom-box">
  <img src="small-image.jpg" class="wm-zoom-default-img"

3. Call the function on the parent container.

  config : {

    // disable inner zoom
    inner : false

4. Default configs.

config : {

  // stage size
  stageW : 500,
  stageH : 400,

  // set to true to enable the inner zoom mode
  inner  : false,

  // [top, right, bottom, left]
  position : 'right', 

  // margin
  margin : 10

Change log:


  • fixed mouseEnter bug.

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