Simple Image Zoom In/Out

@Code4FunJan 30.2012

I have an image with a set “canvas” size of 400×400. I want to zoom in and out on this image with a slider or zoom in/out buttons but keep the canvas dimensions. I’ve found many examples, but they resize the image (eg 500×500) or have a hover box, etc… etc… I need to keep that 400×400 and “magnify” it. Zooming in on the center is fine, just can’t figure out how to pull it off.

Thanks in advance for any thoughts or examples.

to post a comment

JavaScript

@Code4FunauthorFeb 02.2012 — #Anyone?

@xelawhoFeb 02.2012 — #here's something. If you want the zooms to be more dramatic you can play around with the 0.9 and 1.1

[CODE]
 <html>
 <head>
 <style>
 #thediv {
 margin:0 auto;
 height:400px;
 width:400px;
 overflow:hidden;
 }
 
 img {
 position: relative;
 left: 50%;
 top: 50%;
 }
 
 </style>
 </head>
 <body>
 <input type="button" value ="-" onclick="zoom(0.9)"/>
 <input type="button" value ="+" onclick="zoom(1.1)"/>
 <div id="thediv">
 
 <img id="pic" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg"/>
 </div>
 <script>
 window.onload = function(){zoom(1)}
 
 
 function zoom(zm) {
 img=document.getElementById("pic")
 wid=img.width
 ht=img.height
 img.style.width=(wid*zm)+"px"
 img.style.height=(ht*zm)+"px"
 img.style.marginLeft = -(img.width/2) + "px";
 img.style.marginTop = -(img.height/2) + "px";
 }
 
 </script>
 </body>
 </html>
 
 [/CODE]

@Code4FunauthorFeb 02.2012 — #Awesome - this might work perfect! Thanks

@AlcottpdfJul 23.2013 — #Check following image resizing API of a professional image processing library.

[CODE] REImage reImage = REFile.OpenImageFile(fileName);
 
   ImageProcessing.ApplyResize(reImage, 500, 500);
 
   REFile.SaveImageFile(reImage, "c:/reimage.png", new PNGEncoder());[/CODE]

Simple Image Zoom In/Out

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Simple Image Zoom In/Out

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴