Google trends Public Holidays Coupon Code Code Compiler

WM Zoom jQuery Plugin For Image Hover Inner Zoom


Apr 14, 2019

WM Zoom jQuery Plugin For Image Hover Inner Zoom

WM Zoom is a jQuery plugin that creates a magnifier overlay on the image and displays the high definition image inside it. Also provides a config to provide Inner zoom functionality as you mouse hover on the image.

Download WM-ZOOM plugin for inner zoom - WM-ZOOM

Include CSS in head tag


<link rel="stylesheet" href="wm-zoom/jquery.wm-zoom-1.0.min.css">

HTML Code


<div class="wm-zoom-container my-zoom">
			  				<div class="wm-zoom-box">
			  					<img src="assets/img/small-image.jpg" class="wm-zoom-default-img" alt="alternative text" data-hight-src="assets/img/big-image.jpg" data-loader-src="assets/img/loader.gif">
			  				</div>
			  			</div>

Include JS before close body tag


<script type="text/javascript" src="assets/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="wm-zoom/jquery.wm-zoom-1.0.min.js"></script>

Add jquery code before close body tag and after above jquery pulgin


$(document).ready(function(){
	$('.my-zoom').WMZoom({
		config : {
			inner : true
		}
	});
});

Copyright 2024. All rights are reserved