WM Zoom jQuery Plugin For Image Hover Outer Zoom

WM Zoom jQuery Plugin For Image Hover Outer Zoom

Apr 13, 2019 / CSS / JavaScript /

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

Download WM zoom plugin 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="img/thumb-image.jpg" class="wm-zoom-default-img" alt="alternative text" data-hight-src="img/large-image.jpg" data-loader-src="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();
});

Comments

Mohammd ( Apr 14, 2019 07:16:25 )

Thank u

Would you like to share your thoughts?

Your email address will not be published. Required field are marked*

Copyright 2018. All rights are reserved Significant Techno Web Design & Web Development By Significant Techno