In this post we give the detailed example of how to use image magnifier or image zooming using javascript.
Basically Image magnifier work when you move the mouse over image.In this example i not using any plugin . i'm creating just javascript function and use css and make the awesome image zoommer.
Let start how to make image zoom using javascript.
Example:-
HTML:-
<html ng-app="unified">
<head>
<meta charset="utf-8" />
<title>Image Zoommer</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<style>
#zoommer{
border:1px solid black;
width:250px;
height:250px;
display:inline-block;
background-image:url('https://pbs.twimg.com/profile_images/811604843542388736/m1sL4AsC_400x400.jpg');
background-repeat:no-repeat;
}
</style>
</head>
<body ng-controller="MainController">
<img id="imgZoomer" width="200px" height="250px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="https://pbs.twimg.com/profile_images/811604843542388736/m1sL4AsC_
400x400.jpg">
<div id="zoommer" onmousemove="zoomIn(event)"></div>
</body>
</html>
Script:-
function zoomIn(event) {
var element = document.getElementById("zoommer");
element.style.display = "inline-block";
var img = document.getElementById("imgZoomer");
var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft;
var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop;
element.style.backgroundPosition=(-posX*2)+"px "+(-posY*4)+"px";
}
function zoomOut() {
var element = document.getElementById("zoommer");
element.style.display = "none";
}
Now we have set all things above script add in head section or before body end of page
It work fine let see the output.
Example Link
Hope you like the post .Please share and comment below or customer care section.
Thanks.
0 Comments