Any Idea how to zoom in a image on particular point using javascript css ? I am using webkit based browser. I can zoom by specifying zoom property , like elem.style.zoom="150%", Main problem is I cannot centre the image where I want to zoom. I can get the point where I want to zoom using mouseclick.
+1
A:
As I said in my comment above, I would avoid the zoom css property and stick to just javascript. I managed to throw together the following code which works pretty well for the first click, really all it needs is a little more dynamicity (even a word?).
<html>
<head>
<script type="text/javascript">
function resizeImg (img)
{
var resize = 150; // resize amount in percentage
var origH = 61; // original image height
var origW = 250; // original image width
var mouseX = event.x;
var mouseY = event.y;
var newH = origH * (resize / 100);
var newW = origW * (resize / 100);
// Set the new width and height
img.style.height = newH;
img.style.width = newW;
var c = img.parentNode;
// Work out the new center
c.scrollLeft = (mouseX * (resize / 100)) - (newW / 2) / 2;
c.scrollTop = (mouseY * (resize / 100)) - (newH / 2) / 2;
}
</script>
<style type="text/css">
#Container {
position:relative;
width:250px;
height:61px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="Container">
<img alt="Click to zoom" onclick="resizeImg(this)"
src="http://sstatic.net/so/img/logo.png" />
</div>
</body>
</html>
It works in Google Chrome and IE, not sure about others. Like I said hopefully it will point you in the right direction.
Andy E
2010-01-08 17:38:32
Andy ! Cool , Now I am totally experimenting with above for my requirement , Thanks for suggestion. All I need to do is calculations and alter the height , width , position.
sat
2010-01-11 07:28:12
No problem, good luck :)
Andy E
2010-01-11 10:33:15
hey Andy , If I am going to zoom multiple times , meaning 1st click 150% zoom , next 200% then 250% , how do I work out the new center, so that it scrolls and centres properly. ??!!
sat
2010-02-05 12:02:25
A:
What has to be done.
- Get the location of the click inside the image. This might seem easy but it is not because the pageX and pageY of the event hold the coordinates in regard to the document. To calculate where inside the image someone clicked you need to know the position of the image in the document. But to do this you need to factor in all the parents of it, as well as if they are relative/absolute/static positioned .. it gets messy..
- calculate the new center (the click position scaled - the top/left position of the container)
- scale the image and scroll the container to the new center
if you do not mind using jQuery for it then use the following (tested)
<script type="text/javascript">
$(document).ready(
function(){
$('#Container img').click(
function( event ){
var scale = 150/100;
var pos = $(this).offset();
var clickX = event.pageX - pos.left;
var clickY = event.pageY - pos.top;
var container = $(this).parent().get(0);
$(this).css({
width: this.width*scale,
height: this.height*scale
});
container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}
);
}
);
</script>
and the html needed
<div id="Container">
<img alt="Click to zoom" src="http://sstatic.net/so/img/logo.png" />
</div>
Gaby
2010-01-08 21:33:29