Dynamically Resize Popup Window to Image Size It Contains


Click thumbnails for auto sizing popup window of full size image.



  1. Place a link on main page to call the popup function.
  2. Pass it the image name, a caption, leave the dimensions 0,0 and you can set the foreground and background text colors.

    e.g. showPic('testimg.jpg','First image, landscape',0,0,'#000000','#999999')

    (Note: If you prefer, provide the image width and height in this call so as to bypass the popup window visually resizing from 100 x 100 to the actual dimensions of the image.)
  3. Once called, showPic() will open a new window with a default size of 100 x 100 pixels.
  4. The popup window content is written with document.write()'s.
  5. The content includes an onLoad event handler in the body tag that calls the autoSize() function from the main window.
  6. The autoSize() function gets the image width and height from the popup window and resizes the popup window to those dimensions and then focuses it (this brings it to the top).
  7. Subsequent calls to showPic() will resize the popup window to the new images.
  8. This method has its drawbacks because each platform/browser combination renders new windows slightly different.
  9. The autoSize() function contains browser specific code to handle these differences at least for IE5.5+, NN4, and NN6 running on a Windows OS.
  10. I couldn't get this code to work on Opera 5.02.  Update:  I just installed Opera 6.0 and tried the code again with Opera set to identify as MSIE 5 and it worked!  I don't plan on going out of my way to code for Opera until it's DHTML support improves, but at least in IE mode this script will work.