How can I update the following code to accomodate opening images with new dimensions and having the popUp resize properly each time? The existing code I have only works properly in NS4+. In IE6/NS6, new images open in the window following the dimensions when the popUp was first opened and will not resize. I would like to keep the popUp open and have the window resize to new specified dimensions when the user clicks on a new link/image thumbnail.
------ SCRIPT ------
<script language="JavaScript">
<!--- Hide script from old browsers
function OpenNewWindow(WindowPicture,WindowParameters)
{
NewWindow=window.open("","NewOne", WindowParameters);
NewWindow.document.write ("<HTML><HEAD><TITLE>");
NewWindow.document.write ("Window Title Here");
NewWindow.document.write ("</TITLE></HEAD>");
NewWindow.document.write ("<BODY onLoad='self.focus();' BGCOLOR='Black' MARGINWIDTH=0 MARGINHEIGHT=0 LEFTMARGIN=0 TOPMARGIN=0>");
NewWindow.document.write ("<P ALIGN=CENTER>");
NewWindow.document.write ("<IMG SRC=");
NewWindow.document.write (WindowPicture);
NewWindow.document.write (">");
NewWindow.document.write ("</P>");
NewWindow.document.write ("</BODY></HTML>");
NewWindow.document.close();
return false;
}
// end hiding from old browsers -->
</script>
------ BODY ------
<a href=# onClick="OpenNewWindow('images/landscape.jpg','resizable=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,toolbar=0,width=525,height=380');return false;"><img src="thumbnails/thumb_landscape.jpg" width="100" height ="72" border="1" alt="click for a larger version of this image"></a>
<a href=# onClick="OpenNewWindow('images/portrait.jpg','resizable=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,toolbar=0,width=360,height=480');return false;"><img src="thumbnails/thumb_portrait.jpg" width="54" height ="72" border="1" alt="click for a larger version of this image"></a>
<a href=# onClick="OpenNewWindow('images/rand.jpg','resizable=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,toolbar=0,width=200,height=550');return false;"><img src="thumbnails/thumb_rand.jpg" width="54" height ="72" border="1" alt="click for a larger version of this image"></a>
Thanks!
DS
by: chen_avinadavPosted on 2002-12-21 at 04:51:50ID: 7617161
Change your code to this:
function OpenNewWindow(WindowPictur
NewWindow=window.open('',"
NewWindow.document.write ("<HTML><HEAD><TITLE>");
NewWindow.document.write ("Window Title Here");
NewWindow.document.write ("</TITLE></HEAD>");
NewWindow.document.write ("<BODY onLoad='self.focus(); self.resizeTo(theimg.width
NewWindow.document.write ("<P ALIGN=CENTER>");
NewWindow.document.write ("<IMG id=theimg SRC=");
NewWindow.document.write (WindowPicture);
NewWindow.document.write (">");
NewWindow.document.write ("</P>");
NewWindow.document.write ("</BODY></HTML>");
NewWindow.document.close()
return false;
}
This way, the window will *AUTOMATICALLY* resize itself, according to the image that is loaded. You don't even have to specify the size yourself. If you want to have a different size, alter this line:
NewWindow.document.write ("<BODY onLoad='self.focus(); self.resizeTo(theimg.width
For example, if you want the window to be 10 pixels wider and 20 pixels higher than the image, change it to this:
NewWindow.document.write ("<BODY onLoad='self.focus(); self.resizeTo(theimg.width
Hope this helps.
Chen