Self-adapting Picture size pop-up window

Pop-up windows | adaptive

Most of the time we need to provide this feature to visitors: When a visitor clicks on a thumbnail in the page, its full-size picture is displayed in a new pop-up window for the visitor to view.

The easiest method to do this is to create an image link with the following HTML code:
<a href= "http://www.webjx.com/htmldata/2005-02-25/fullsize.jpg" target= "_blank" ></a>
where the href attribute of the <a> tag specifies that the Url,target property of the full-size picture is set to _blank specifies the URL of the thumbnail for the SRC attribute that displays the picture; tag in a new window.

If we want some control over the appearance of the window that displays full-size pictures (such as the height of the pop-up window, width can match the size of full-size pictures, you can call the Window.Open method, which receives three parameters, specifying the URL, window name, and window characteristics of the file to open, respectively. You can specify the height, width, and the menu bar, toolbar, and so on in the window attribute parameters. The following code will show the full-size picture in a window without a toolbar, address bar, status bar, menu bar, width, height of 400, 350, respectively:
<a href= "http://www.webjx.com/htmldata/2005-02-25/fullsize.jpg" ></a>

Here's a question, if all full-size pictures have a uniform size (for example, all 400x350), then the above code applies to all thumbnail link (just a full-size picture file that the href attribute points to). But if full-size pictures are not uniform in size, also use the above code we need to get the size of each full-size picture, and then in the Window.Open method of the window feature parameter one by one set height and width for the correct value, in the case of a large number of pictures, this is obviously inefficient. So is there a permanent way to make the pop-up window fit automatically to show the size of the picture? 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 picture, by reading its width and height properties, you can get the size of the mounted picture, in order to set the size of the pop-up window, You can achieve the Adaptive Picture size pop-up window. 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 height and width of the image have been achieved
if ((imgobj.width!= 0) && (imgobj.height!= 0))
Sets the height and width of the pop-up window according to the height and width of the image obtained, and opens the window
Where the increments 20 and 30 are the amount of space between the window border and the picture
Openfullsizewindow (Theurl,winname, ", width=" + (IMGOBJ.WIDTH+20) + ", height=" + (imgobj.height+30));
Else
Because it is not possible to immediately get the width and height of the picture by dynamically loading the picture through the Image object, the check is repeated every 100 milliseconds
SetTimeout ("Checkimg + theURL +", "+ Winname +") ", 100)
}
}

function Openfullsizewindow (theurl,winname,features) {
var anewwin, Sbasecmd;
Pop-up window appearance parameters
Sbasecmd = "Toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,";
Whether the call came from checkimg
if (features = NULL | | features = = "") {
Creating an Image Object
Imgobj = new Image ();
Set Image source
IMGOBJ.SRC = theURL;
Start getting image size
Checkimg (theURL, Winname)
}
else{
Open a Window
Anewwin = window.open (theurl,winname, Sbasecmd + features);
Focus window
Anewwin.focus ();
}
}
-->
</script>

When used, place the above code in the The above code is tested through IE 5.x-6.0.