Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Spread your code soluces to the world

Love me
Solucior » JAVASCRIPT » Javascript Image magnification

Javascript Image magnification

06/16/2011 by Dux   -   4.5/5 (10 ratings)

Add magnifying glass options on your images with this simple code.

Demo.

image zoom loupe
ZOOM

source code



 
<script type="text/javascript">
<!--
function
zoom(e, sens) {
   var
elm = document.getElementById(e);
   
   
// Image width
   
var w = (elm.offsetWidth) ? elm.offsetWidth : elm.style.pixelWidth;
   
   
// Parent element width
   
var wc = (elm.parentNode.offsetWidth) ? elm.parentNode.offsetWidth : elm.parentNode.style.pixelWidth;
   
   
// Image size
   
w = (sens>0) ? w * 1.25 : w / 1.25;
   if (
w < wc) w = wc;
   
elm.style.width = w + "px";
}
-->
</script>


<div style="width: 400px; height: 303px; overflow: scroll; border: 1px solid">
   <img id="nice" src="nice.jpg" alt="image zoom loupe" style="width:100%" />
</div>
<input type="button" value="-" onclick="zoom('nice', -1)" />
ZOOM
<input type="button" value="+" onclick="zoom('nice', 1)" />

Tested with Safari  Google Chrome  Firefox3  Firefox4  Opera  IE6  
Rate this code     |     Copied : 91x

Comments for Javascript Image magnification

No comment
Add a comment Nickname
ZOOM


Javascript Image magnification
Isolate a color
Extract images from a page
Horizontal scroll div with javascript
Dynamic image resizing according to location
Javascript opacity
Adjust the rate of image colors
Zoom with CSS3
Simple image gallery PHP
Automatically adjust brightness contrast of an image