Adaptive Image Size dialog box

Many times we need to provide this function to visitors: When a visitor clicks a thumbnail on the page, the full-size image corresponding to the thumbnail will be displayed in a new pop-up window for visitors to view.

The simplest way to implement this function is to use the following HTML code to create an image link:
<A href = "fullsize.jpg" target = "_ blank"> </a>
The <a> marked href attribute specifies the URL of the full-size image, and the target attribute is set to _ blank to display the image in a new window; the marked src attribute specifies the URL of the thumbnail.

If you want to control the appearance of a window that displays a full-size image (for example, if you want the height and width of the window to match the size of the full-size image), you can call the window. open method. This method receives three parameters, respectively specifying the URL, window name, and window properties of the file to be opened. You can specify the window height and width in the window property parameters, whether to display the menu bar and toolbar. The following code displays a full-size image in a window without a toolbar, address bar, Status Bar, and menu bar. The width and height are 400 and 350 respectively:
<A href = "fullsize.jpg" onClick = "window. open (this. href, '', 'height = 350, width = 400, toolbar = no, location = no, status = no, menubar = no '); return false "> </a>

This raises a question. If all full-size images have a uniform size (for example, 400x350 ), the above Code applies to all the thumbnail links (only the full-size image file pointed to by the href attribute is different ). However, if the size of the full-size image is not uniform and the above code is used, we need to first obtain the size of each full-size image, and then in the window. in the window property parameters of the open method, the values of height and width are set to the correct values. When the number of images is large, the efficiency is obviously too low. Is there a permanent way to enable the pop-up window to automatically adapt to the size of the image to be displayed? Through research, we found that we can use the Image object in DHTML to achieve our goal. The Image object can dynamically load the specified Image and obtain the size of the loaded Image by reading its width and height attributes, in this way, you can set the size of the pop-up window to adjust the image size. The following is the implementation code:
<Script language = "JavaScript" type = "text/JavaScript">
<! --
Var imgObj;
Function checkImg (theURL, winName ){
// Whether the object has been created
If (typeof (imgObj) = "object "){
// Whether the image height and width have been obtained
If (imgObj. width! = 0) & (imgObj. height! = 0 ))
// Set the height and width of the pop-up window based on the obtained image height and width, and open the window
// Increment 20 and 30 indicate the interval between the window border and the image.
OpenFullSizeWindow (theURL, winName, ", width =" + (imgObj. width + 20) + ", height =" + (imgObj. height + 30 ));
Else
// Because the Image is dynamically loaded through the Image object, it is impossible to get the Image width and height immediately, so the check is repeated every 100 milliseconds.
SetTimeout ("checkImg ('" + theURL + "', '" + winName + "')", 100)
}
}

Function OpenFullSizeWindow (theURL, winName, features ){
Var aNewWin, sBaseCmd;
// Display parameters
SBaseCmd = "toolbar = no, location = no, status = no, menubar = no, scrollbars = no, resizable = no ,";
// Whether the call is from checkImg
If (features = null | features = ""){
// Create an image object
ImgObj = new Image ();
// Set the image source
ImgObj. src = theURL;
// Start to get the image size
CheckImg (theURL, winName)
}
Else {
// Open the window
ANewWin = window. open (theURL, winName, sBaseCmd + features );
// Focus window
ANewWin. focus ();
}
}
// -->
</Script>

In use, place the above Code in the The above Code passed the test in IE 5. x-6.0.