Click here to Skip to main content
15,867,749 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I wanted to understand as to how do we zoom an image using a zoom bar with buttons for zoom in and zoom out

What I have tried:

.img-zoom {
height : 80%;
overflow : auto;
text-align:center;
font-weight: 70%;
overflow : auto;
}
.img-zoom img {
vertical-align : middle;
margin : 0;
padding : 0;
border : 0;
transition : transform 0.5s ease;
zoom: 1.2;
}
<pre>const zoomElement = document.querySelector(".img-zoom");
let zoom = 1;
const ZOOM_SPEED = 0.1;

document.addEventListener("wheel", function (e) {
  if (e.deltaY > 0) {
    zoomElement.style.transform = `scale(${(zoom += ZOOM_SPEED)})`;
  } else {
    zoomElement.style.transform = `scale(${(zoom -= ZOOM_SPEED)})`;
  }
});
Posted
Comments
Abhinav Kishore M 1-Oct-22 12:03pm    
plz help me out
Abhinav Kishore M 2-Oct-22 5:33am    
There is a small change in the code:
var imagesize = $('img').width();

$('.zoomout').on('click', function(){
imagesize = imagesize - 30;
$('img').width(imagesize);
});

$('.zoomin').on('click', function(){
imagesize = imagesize + 30;
$('img').width(imagesize);
});

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900