function showpic(sURL){
newwindow=open(sURL,"Picture","scrollbars=no, toolbar=no, directories=no, menu bar=no, resizable=yes, status=yes, width=700, height=700");
}
in a very simple image gallery. sURL is the path to the image location. My hyperlink call looks like this:
<a href="javascript:showpic("images/phinnegan/phin_beach.jpg" )" ></a>
My question is: is there a way that I can cause the new window to autofit to the size of the image? All the images in the gallery are different dimensions, and either there is alot of whitespace around the image, or it is larger than the window itself.
I apologize if this has been discussed, I checked the first 8 pages and didn't see it.
Thank you in advance for any help.
DRW
Zach Elfers
02-03-2003, 09:44 AM
This might work for you:
First, give all your images an id.
<img src="img.ext" id="img">
...
<script type="text/JavaScript">
<!--
function openImgWin(URL, imgId) {
if (document.getElementById) {
id = document.getElementById(imgId);
w = id.width;
h = id.height;
imgWin = window.open(URL, "imgWin","width="+w+",height="+h+",menubar=no,toolbar=no,directories=no,resizable=no);
imgWin.focus();
}
}
//-->
</script>
Or do this. It will take longer because you'd have to specify the width and height for every image:
Zach's first method doesn't do what you want it to do - you have to have the image loaded in your first document - and it relies upon some somewhat recent technology. The second method will open a window of a certain size the first time it is called, but it will load the image into that same window on subsequent calls unless the window has been closed. And as this is a necessary feature of your page, you need to make sure that things still work when JavaScript is absent.
<a href="http://www.w3.org/People/Raggett/dsr.gif" onclick="return openWin(this.href, 110, 130)">A Picture of the man who gave us HTML 3.2</a>
Phinnegan
02-03-2003, 10:18 AM
Thank you Zach and Charles.
As Charles said, the first method supplied by Zach worked in resizing the window, but it was sizing it to the dimensions of the thumnail which serves as the link to the full size image.
I'm happy to go with Zach's second suggestion, adding in the resizeTo() call supplied by Charles to ensure it works without first closing the window.
But one last question: Knowing the path to where the image resides on the server, is there no way that I can retrieve the dimensions of the full size image? (my cheap-o isp does not allow server side scripting, so I'm afraid I already know the answer to this one before I ask! - but it's worth a shot).
Thanks again for your help. I truly appreciate the responses, and you have provided me with a great solution.
DRW
Zach Elfers
02-03-2003, 10:23 AM
To close the window when it's not being used put <body onBlur="self.close();">, but you already have a solution to my script's problem.
khalidali63
02-03-2003, 10:26 AM
Your best aproach might be this.
in the html page you have calls like this
<script type="text/javascript">
function showpic(url){
var newImg = document.createElement("img");
newImg.setAttribute("src",url);
alert(newImg.height)
//create image sized window
var winProps = "width="+newImg.width+", height="+newImg.height+", scrollbars=no, toolbar=no, directories=no, menu bar=no, resizable=yes, status=yes";
newwindow=open(url,"Picture",winProps);
}
</script>
It should open any image the url of which is passed to showimage function, it will auto calculate the height and width and open the new window with the dimesions
cheers
Khalid
Charles
02-03-2003, 10:32 AM
You cannot do it that way, but there is another way. First, you must make sure that people who do not use javascript can still see the image. Make sure that the link looks something like:
<a href="http://www.w3.org/People/Raggett/dsr.gif" onclick="return openWin(this.href)">A Picture of the man who gave us HTML 3.2</a>
Then change the fuction so that it opens a new but empty window of some generic size, using win.document.write(), write a valid HTML document, one that displays the image, to that window, use the win.document.images[0].height and win.document.images[0].width to get the image's dimensions and resize the window.
gil davis
02-03-2003, 11:26 AM
Try http://gil.davis.home.att.net/shuttle4.htm and click on one of the patches.
Phinnegan
02-03-2003, 11:51 AM
Gil:
Thanks for the link. Looks exactly like what I'm trying to accomplish.
Would you be willing to share the contents of "openit.js"?
PS - very emotional to see the contents of your page.