ads_header

Home JAVASCRIPT How To Create Zoom Image Detail VIEWS

How To Create Zoom Image Detail

May 04, 2018
Read

How To Create Zoom Image Detail


Hello guys, in this post I will discuss a bit about the Zooming program which the program will display a picture in the browser and when the cursor is highlighted in the image area it will be displayed directly (Zoom In) or more detail the area of ​​the image.

Okay just start our tutorial, now open your text editor then follow the following code, and here I use the Sublime text editor:

<head>
 <title>Zoom Image</title>
<style>
* {box-sizing:border-box;}
.img-zoom-container{
 position: relative;
}
.img-zoom-lens{
 position: absolute;
 border: 1px solid #d4d4d4;
 width: 40px;
 height: 40px;
}

.img-zoom-result{
 border: 1px solid #000;
 width: 300px;
 height: 300px;
}
</style>
<script>
function imagezoom(imgID, resultID){
 var img, lens, result, cx, cy;
 img = document.getElementById(imgID);
 result = document.getElementById(resultID);
 lens = document.createElement("DIV");
 lens.setAttribute("class", "img-zoom-lens");
 img.parentElement.insertBefore(lens, img);
 cx = result.offsetWidth / lens.offsetWidth;
 cy = result.offsetHeight / lens.offsetHeight;
 result.style.backgroundImage = "url('" + img.src + "')";
 result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
 lens.addEventListener("mousemove", moveLens);
 img.addEventListener("mousemove", moveLens);

 lens.addEventListener("touchmove", moveLens);
 img.addEventListener("touchmove", moveLens);

 function moveLens(e){
  var pos, x, y;
  e.preventDefault();
  pos = getCursorPos(e);
  x= pos.x - (lens.offsetWidth / 2);
  y = pos.y - (lens.offsetHeight / 2);

  if(x > img.width - lens.offsetWidth){x = img.width - lens.offsetWidth;}
  if(x < 0){x=0;}
  if(y > img.height - lens.offsetHeight){y = img.height - lens.offsetHeight;}
  if(y < 0){y=0;}

  lens.style.left = x + "px";
  lens.style.top = y + "px";

  result.style.backgroundPosition = "-" + (x * cx) +"px -" + (y * cy) + "px";     
 }

 function getCursorPos(e){
  var a, x = 0, y = 0;
  e = e || window.event;
  a = img.getBoundingClientRect();
  x = e.pageX - a.left;
  y = e.pageY - a.top;

  x = x - window.pageXOffset;
  y = y - window.pageYOffset;
  return {x : x, y : y};
 }
}
</script>
</head>

NOTES :

Code above for tag <head></head> which includes your Title and CSS .HTML files

MORE ARTICLE

Image Filter Effect HTML


For Tag <body></body> enter code below

<body>
<h1>
Zoom Image
</h1>

<p>Mouse Over The Image</p>
<div class="img-zoom-container">
 <img id="myimage" src="img.png" width="300" height="200" border="1px">   
 <div id="myresult" class="img-zoom-result"></div>
</div>
<script>
imagezoom("myimage", "myresult");
</script>
</body>





NOTES :

Make sure you've set the image and save it in a folder with this .HTML file, and customize its name in the src tag
If all is done, immediately save with type .HTML then run through your browser.

For more details, please watch the video below


Tags :
Powered by Blogger.