If you’re a Webmaster who has to deal with image galleries, then make a note of this clever script. It gives you a solution to a very common problem — how to resize a popup window to fit the image sizes displayed in it. The script works in NS 4/5/6/7 and IE 4/5/6.
First of all you’ll need one main HTML page that will contain links to the full-sized pictures in your gallery:
<HTML>
<HEAD>
<TITLE>The Image Gallery</TITLE>
<script language="Javascript">
function PopupPic(sPicURL) {
window.open( "popup.htm?"+sPicURL, "",
"resizable=1,HEIGHT=200,WIDTH=200");
}
</script>
</HEAD>
<BODY bgcolor="#FFFFFF">
<a href="javascript:PopupPic('Image1.gif')">Image 1</a><br>
<a href="javascript:PopupPic('Image2.gif')">Image 2</a><br>
<a href="javascript:PopupPic('Image3.gif')">Image 3</a><br>
</BODY>
</HTML>Let’s study the code above a little. We have a straightforward HTML page that contains a couple of links, and defines a simple Javascript function: PopupPic(). By clicking on any of the links on this page, you’ll call the PopupPic() function. This function is really simple: the only thing it does is create a popup browser window, and load the popup.htm page in it.
The trick is that we pass the image’s URL (relative to the image gallery Web page location) in the query string when the popup is created:
window.open( "popup.htm?"+sPicURL, "",
"resizable=1,HEIGHT=200,WIDTH=200");Now, take a look at the code of the popup.htm page:
<HTML>
<HEAD>
<TITLE>Fit the Pic Script</TITLE>
<script language='javascript'>
var arrTemp=self.location.href.split("?");
var picUrl = (arrTemp.length>0)?arrTemp[1]:"";
var NS = (navigator.appName=="Netscape")?true:false;
function FitPic() {
iWidth = (NS)?window.innerWidth:document.body.clientWidth;
iHeight = (NS)?window.innerHeight:document.body.clientHeight;
iWidth = document.images[0].width - iWidth;
iHeight = document.images[0].height - iHeight;
window.resizeBy(iWidth, iHeight);
self.focus();
};
</script>
</HEAD>
<BODY bgcolor="#000000" onload='FitPic();' topmargin="0"
marginheight="0" leftmargin="0" marginwidth="0">
<script language='javascript'>
document.write( "<img src='" + picUrl + "' border=0>" );
</script>
</BODY>
</HTML>The first thing that should grab our attention is the fact that we’re using Javascript code, which is directly executed while the page loads:
var arrTemp=self.location.href.split("?");
var picUrl = (arrTemp[1].length>0)?arrTemp[1]:"";
var NS = (navigator.appName=="Netscape")?true:false;First, we get the page URL string and split it by the “?” character. The result of this split is held in the arrTemp array variable.
On the second line we check if the second element of our temp array — arrTemp[1] — has length greater than 0, and if this is true, we assign the value of this second array element to the picURL variable.
On the third line we assign true to the NS variable if the browser is Netscape, otherwise we assign false. As you may already have guessed, the PicURL variable contains the relative URL of the picture that will be displayed in the popup.htm page.
After we have the PicURL variable, we can easily write the image into the document’s body using document.write:
document.write( "<img src='" + picUrl + "' border=0>" );After the page is completely loaded into the browser, the Load event is triggered and because we use onLoad event handler, the function FitPic() is called. The first 2 lines of this function find the browser’s window width and height (depending on the browser). The next 3 lines however, are the most important lines in this function. Let’s have a good look at them:
iWidth = document.images[0].width - iWidth;
iHeight = document.images[0].height - iHeight;
window.resizeBy(iWidth, iHeight);After the page is fully loaded we can access the document’s image collection, thus gaining access to the image properties. Because we have only one image on our page, and because the images collection is zero-based, the image is accessible with document.images[0] — this way, we can get image’s width and height.
Then we subtract the initial browser width from the actual image width — the result is a number by which the browser width has to be resized. We do the same with the initial browser height and the actual image height to ascertain the number of pixels by which we should resize the browser height in order to fit the picture.
The 3rd line is the actual resizing done by JavaScript’s built in resizeBy() function. If you aren’t familiar with the resizeBy() function, here’s a short explanation.
By definition, this function resizes the current browser window by a certain amount. It takes 2 parameters: window.resizeBy(X, Y):
- X – The number of pixels to grow the window horizontally
- Y – The number of pixels to grow the window vertically
The following line shrinks the window’s width by 10px and extends its height by 13px:
window.resizeBy(-10, +13);The final line in our FitPic() function puts the focus on the popup.
So, to summarize how the script works, we pass the image-relative URL to the popup.htm (popup.htm?Images/Image1.gif), then we write the image tag into the body of the page with document.write, and when the page is loaded, we call FitPic(), which resizes the browser window to the image size.
To see our script in action, click here.
Frequently Asked Questions on Resizing Popups to Fit Image Sizes
How can I ensure that my popup resizes according to the image size?
To ensure that your popup resizes according to the image size, you need to use JavaScript. JavaScript provides the ability to dynamically adjust the size of a popup based on the size of the image. This can be achieved by getting the image’s width and height using the naturalWidth and naturalHeight properties, and then setting the popup’s width and height to these values.
What are the best practices for resizing popups to fit image sizes?
The best practices for resizing popups to fit image sizes include ensuring that the popup does not exceed the viewport size, maintaining the aspect ratio of the image, and providing a way for users to close the popup. It’s also important to test the popup on different screen sizes to ensure it displays correctly.
How can I resize an image in JavaScript?
Resizing an image in JavaScript can be done using the canvas element. First, create a new canvas element and set its width and height to the desired size. Then, draw the image onto the canvas using the drawImage method. Finally, use the canvas’s toDataURL method to get the resized image.
What are the recommended sizes for popups on desktop and mobile?
The recommended size for popups on desktop is typically around 700px to 800px in width, and 500px to 600px in height. For mobile, a width of 300px to 350px and a height of 200px to 250px is usually sufficient. However, these sizes can vary depending on the content of the popup and the design of the website.
How can I smoothly resize an image with JavaScript?
To smoothly resize an image with JavaScript, you can use the canvas element’s drawImage method with a smoothingQuality property set to ‘high’. This will ensure that the image is resized with high quality, reducing any pixelation or distortion.
What are some popup design best practices?
Some popup design best practices include keeping the design simple and clean, using clear and concise messaging, and ensuring that the popup is easy to close. It’s also important to make sure that the popup does not obstruct important content on the page.
How can I resize a popup to fit the screen size?
To resize a popup to fit the screen size, you can use the window.innerWidth and window.innerHeight properties in JavaScript. These properties return the width and height of the viewport, which you can then use to set the size of the popup.
How can I maintain the aspect ratio of an image when resizing it?
To maintain the aspect ratio of an image when resizing it, you need to calculate the ratio of the image’s width to its height, and then use this ratio when setting the new width and height. This will ensure that the image is not distorted when it is resized.
How can I ensure that my popup is responsive?
To ensure that your popup is responsive, you should use media queries in your CSS to adjust the size and layout of the popup based on the screen size. You can also use JavaScript to dynamically adjust the size of the popup based on the viewport size.
How can I test my popup on different screen sizes?
To test your popup on different screen sizes, you can use the device emulation feature in your browser’s developer tools. This allows you to simulate different screen sizes and resolutions, helping you to ensure that your popup displays correctly on all devices.
Peter TodorovPeter runs a Windows hosting company www.ASP-Hosting.ca, which offers affordable ASP and ASP.NET hosting. He started recently www.ASPdev.org featuring ASP and ASP.NET articles and tutorials.
