Help zooming image in iframe 1

Xaqte · Oct 16, 2005

I've got a page with an iframe contining a page that only has one item in it, and it is an image. I need to zoom in & out on this image. I've been able to have the button call a function in the iframe page, but I can't get any of the zoom functionality working. I'm sure if someone could help me out with the zoom in function, I could probably figure out the zoom out function.

Here is a link to the page in question:

http://knowmad.com/~ian/mover/dragger.htm

I have searched through this forum, and have tried a number of things from this search. From the results of one of these searches, I did find something that worked on the page itself... but it didn't once it was viewed in the iframe.
It is located here:

http://knowmad.com/~ian/mover/zoom.html

As you click on the image... it grows.

I'm sorry for such a long post! Any help/thoughts would be greatly appreciated! If you wish I can post any of the code I have to this thread to make it easier... just let me know!

X

tsuji · Oct 17, 2005

[1]
>I've been able to have the button call a function in the iframe page, but I can't get any of the zoom functionality working.
The page you model after (

http://knowmad.com/~ian/mover/zoom.html)

be this as listed below and is called by imgframe.htm.
[tt]
<!--

http://knowmad.com/~ian/mover/zoom.html

-->
<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
<img src="master.jpg" width="50" height="50" onclick="zoomImage(this);">
</body>
</html>
[/tt]
Then the new page to have it in the iframe be something like this which should work. It is just for your verifying purpose as you report that yours does not work.
[tt]
<html>
<head><title></title></head>
<body>
<iframe name="ifrm" style="width:50%;height:50%;" src="imgframe.htm">
</body>
</html>
[/tt]
[2] Now, if you want to get zoom in-zoom out, the most direct approach would be to modify the imgframe.htm like this.
[tt]

<html>
<head>
<script type="text/javascript">
var zoomStep = 25;
function zoomImage(imageObj,e) {
var evt=e?e:window.event;
var sgn=(evt.ctrlKey||evt.shiftKey)?-1:1;
var currentWidth = parseInt(imageObj.getAttribute('width'), 10);
var currentHeight = parseInt(imageObj.getAttribute('height'), 10);
if (isNaN(currentWidth) || isNaN(currentHeight)) return;
imageObj.setAttribute('width', currentWidth + sgn*zoomStep);
imageObj.setAttribute('height', currentHeight + sgn*zoomStep);
}
</script>
</head>
<body>
<img src="master.jpg" width="50" height="50" onclick="zoomImage(this,event);">
<br />
<div id="divid"></div>
</body>
</html>
[/tt]
This is bare-bone approach to get rightaway to the main functionality. If you click by holding down either shift or ctrl, it will zoom the opposite direction.

tsuji · Oct 17, 2005

Note: The <div> in the modified imgframe.htm is not needed. It is only left-over when I test my page.

Xaqte · Oct 20, 2005

Sorry for the delayed reply. But, that is exactly what I needed to get me started... thanks alot!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Help zooming image in iframe 1

Xaqte

IS-IT--Management

tsuji

Technical User

tsuji

Technical User

Xaqte

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor