Menu
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 zoom the image much bigger than the screen size. Just can't figure it out how to o that. I'm beginner with Javascript so I hope someone have motivation to help me this little Javascript problem.
I wonder is there any simple zoom in/out/reset plugins that works with zoom buttons? Image grab would be more than cool also.
Thanks again!
function zoomin(){
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
if(currWidth == 2500) return false;
else{
myImg.style.width = (currWidth + 100) + "px";
}
}
function zoomout(){
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
if(currWidth == 100) return false;
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;
}
#navbar a {
float: left;
display: block;
color: #666;
text-align: center;
padding-right: 20px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #4CAF50;
color: white;
}
.main {
padding: 16px;
margin-top: 30px;
}
.main img {
max-width: 100%;
height: auto;
}
.button {
width: 300px;
height: 60px;
}</head>
<body>
<div id="navbar">
<button type="button" onclick="zoomin()"> Zoom In</button>
<button type="button" onclick="zoomout()"> Zoom Out</button>
</div>
<div class="main">
<img id="map" src="http://www.worldatlas.com/webimage/countrys/europelargesm.jpg" />
</div>" />
695
phrasal verb with zoom verb [ I ] infml. /zum/ to adjust a camera to make a person or thing being photographed appear larger or closer: At the beginning of the movie, the camera zooms in to show two people sitting by the side of a river.
Alternate Synonyms for "zoom in":concentrate; focus; center; centre; pore; rivet.
To move up to (someone or something) very rapidly and come to a stop directly beside or in front (of them or it). A black SUV zoomed up and carried the three bank robbers off to safety. Tim zoomed up to me on his bike and handed me the letter. See also: up, zoom.
In photographic terms, to “zoom in” means to make your subject larger in the frame, without actually moving forward yourself (instead, zooming on your lens). On the other hand, to “zoom out” means to go the other way, or to make your subject smaller in the frame.
Your zoom method is working good just remove the css max width, and change your js validation to allow the image, get bigger.
function zoomin(){
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";
}
function zoomout(){
var myImg = document.getElementById("map");
var currWidth = myImg.clientWidth;
if(currWidth == 100) return false;
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;
}
#navbar a {
float: left;
display: block;
color: #666;
text-align: center;
padding-right: 20px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
#navbar a.active {
background-color: #4CAF50;
color: white;
}
.main {
padding: 16px;
margin-top: 30px;
}
.main img {
/* max-width: 100%; */
height: auto;
}
.button {
width: 300px;
height: 60px;
}</head>
<body>
<div id="navbar">
<button type="button" onclick="zoomin()"> Zoom In</button>
<button type="button" onclick="zoomout()"> Zoom Out</button>
</div>
<div class="main">
<img id="map" src="http://www.worldatlas.com/webimage/countrys/europelargesm.jpg" />
</div>On the other hand I would recommend magic zoom as a zoom library
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
