Skip to content Skip to sidebar Skip to footer
Home / Css / Javascript / Zooming

Zooming In & Out An Image By Clicking Zoom Buttons (javascript)

Post a Comment
I'm trying to get an image zoomed in & out by two zoom buttons (+) & (-). The problem is that 'zooming in' stops when the image is full screen size (width 100%). I need to

Solution 1:

Your zoom method is working good just remove the css max width, and change your js validation to allow the image, get bigger.

functionzoomin(){
        var myImg = document.getElementById("map");
        var currWidth = myImg.clientWidth;
        //if(currWidth == 2500) return false;// else{//    myImg.style.width = (currWidth + 100) + "px";//} 
        myImg.style.width = (currWidth + 100) + "px";
    }
    functionzoomout(){
        var myImg = document.getElementById("map");
        var currWidth = myImg.clientWidth;
        if(currWidth == 100) returnfalse;
		 else{
            myImg.style.width = (currWidth - 100) + "px";
        }
    }
*body {
  margin: 0;
}
#navbar {
	overflow: hidden;
	background-color: #099;
	position: fixed;
	top: 0;
	width: 100%;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 20px;
}
#navbara {
  float: left;
  display: block;
  color: #666;
  text-align: center;
  padding-right: 20px;
  text-decoration: none;
  font-size: 17px;
}
#navbara:hover {
  background-color: #ddd;
  color: black;
}
#navbara.active {
  background-color: #4CAF50;
  color: white;
}
.main {
  padding: 16px;
  margin-top: 30px;
}
.mainimg {
	/* max-width: 100%; */height: auto;
}
.button {
  width: 300px;
  height: 60px;
}
</head><body><divid="navbar"><buttontype="button"onclick="zoomin()"> Zoom In</button><buttontype="button"onclick="zoomout()"> Zoom Out</button></div><divclass="main"><imgid="map"src="http://www.worldatlas.com/webimage/countrys/europelargesm.jpg" /></div>

On the other hand I would recommend magic zoom as a zoom library

Solution 2:

Remove max-width: 100%; from .main img css

Post a Comment for "Zooming In & Out An Image By Clicking Zoom Buttons (javascript)"