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

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.
<head> ... <link rel="stylesheet" href="wm-zoom/jquery.wm-zoom-1.0.min.css"> ... </head> <body> ... <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="wm-zoom/jquery.wm-zoom-1.0.min.js"></script> ... </body>
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" data-hight-src="big-image.jpg" data-loader-src="loader.gif"> </div> </div>
3. Call the function on the parent container.
$('.my-zoom').WMZoom({ 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:
2015-03-28
- 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.