Javascript question: opening a new window

Factual Questions
1

Not sure if IMHO is the better forum to post this, if so, feel free to move.

I’m looking for help in writing a small javacript. What I want I want to do is click on a thumbnail and a new browser windwo pops up without the toolbars and all that. Now, I know how to do that, the part I’m missing is how to get the new window to automatically fit the picture?

Is it possible to do this with Javascript? I know I can set the window size on the script itself, but I would have to do that for every picture in the album which would probably drive me nuts. Is there a better option?

2

You can use JavaScript to resize the window once the picture has loaded and its dimensions are available to the client.



<html>
	<body onload="loadFunc()">
		<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
			<tr><td align="center" valign="middle">
				<img src="test.jpg" id="imgSize"/>
			</td></tr>
		</table>
	</body>
	
	<script language="JavaScript">
		function loadFunc() {
			var oImg = document.getElementById("imgSize");
			window.resizeTo(oImg.scrollWidth + 50,oImg.scrollHeight + 200);
		}
	</script>
</html>

The HTML page above places the image in a table that will centre it vertically and horizontally on the page. When the loading is finished the function “loadFunc” is called, and that reads the dimensions of the image and sets the size of the window to something appropriate.

The arbitrary constants in the “window.resizeTo” line (+50 and +200) are there to allow for the scrollbars, menu bars and tool bars (if any) in the new window. Adjust these to your needs and the size of any extra content. Note that different browsers may require slightly different amounts, so test it in as many as possible and try to make sure your page still looks good if there’s a little extra space around the image.

I’ve tested the page above in IE6 and FireFox.

Hope this helps.

3

I don’t think he wants to resize his current window. He wants to pop open a new window, without all the decoration on it.

Something like this (untested):



<HTML>
<script language="Javascript">
function popupWindow(url, height, width)
{
  window.open(url, null, "height=" + height + ",width=" + width + ",status=no,toolbar=no,menubar=no,location=no");
}
</script>
<body>
<img src="popupButton.jpg" onclick="popupWindow('myDialog.htm',200,200);">
</body>
</html>