Autosized pop-up window
	Updated: Nov 25, 2006

You click on a thumbnail picture on some site. If a new browser window opens, sometimes it's too small, sometimes it's too big. On the sites I run, I've found a better way. Read on.

The code in JavaScript

Near the top of the code in most pages on this site is a call to an external JavaScript file. One of the functions has to do with making a pop-up window that conforms to the size of the PICTURE being loaded. A picture has a fixed height and width, so we can do this with pictures.

Anyway, here's the code

 

function viewPic(img)
{ 	
    picfile = new Image(); 
    picfile.src =(img); 
    fileCheck(img); 
}

 

function fileCheck(img)
{ 	
    if( (picfile.width!=0) && (picfile.height!=0) )
    { 
        makeWindow(img); 
    }
    else 
    {
        funzione="fileCheck('"+img+"')"; 
        intervallo=setTimeout(funzione,50); 
    }
}

 

function makeWindow(img)
{ 	
    ht = picfile.height + 20;
    wd = picfile.width + 20; 

    var args= "height=" + ht + ",innerHeight=" + ht;
    args += ",width=" + wd + ",innerWidth=" + wd;
    if (window.screen) 
    { 
        var avht = screen.availHeight; 
        var avwd = screen.availWidth;
        var xcen = (avwd - wd) / 2; 
        var ycen = (avht - ht) / 2;
        args += ",left=" + xcen + ",screenX=" + xcen;
        args += ",top=" + ycen + ",screenY=" + ycen + ",resizable=yes"; 	
    }
    return window.open(img, '', args); 
} 

What the makeWindow function does

Here's where the fun begins. Still using img, we know that it exists and has a height and width. Set variable wd (width) to the width of the picture plus 20 pixels to give a little room on the side. Set variable ht (height) to picture height plus 20. This will make it line up nicely in the new window (at least for IE and Firefox browsers) with a bit of white space around the image.

Assign args (arguments, or parameters) for height, innerHeight, width, and innerWidth. These all have to do with the dimensions of the window we want to pop up.

If "window.screen" is true (meaning, the machine detects that the viewer is using a browser that is compatible with Internet Explorer 4+), we can also center the window. The program checks the dimensions of the user's screen, accounting for the space used at the top and bottom of the browser for menus and status, finds the center, and feeds in the parameters (args) for where to make the window appear.

The last line opens a new window with img as the content, '' for the name, and the args for dimensions and window options (in this case, we want to let the user resize the window if they want). Other options (address bar, scrollbars, etc.) would just get in the way and distract from the lovely picture.

Another way: no whitespace around image at all

Dodo wrote No Margin Image Pop Up in PHP. Her code adds in features to highlight the thumbnail picture and SHAKE the thumbnail picture which she got from dynamicdrive.com ... it's worth a look even if you don't have a PHP site.

The code in HTML

OK, back to my simple version. Now, here's how to call the Javascript from the Web page.

<script type="text/javascript" language="JavaScript" src="../scriptfile.js"></script>

<a href="images/bigfile.jpg" target="_blank" onClick="viewPic(this.href); return false">
<img src="thumbs/smallfile.jpg" width="60" height="75" alt="Description here.">
</a>

What this does

The first chunk, which is on most pages on this Web site, makes the JavaScript code in the external file "scriptfile" available to this page.

The parts of the second chunk are explained further below.

href	load some file (bigfile.jpg in the subfolder images)
target	_blank means to put it in a new browser window
onClick	When the thing inside the A (anchor) tag is clicked, do something called viewPic using the href in "this" tag ... (aha, the picture file); the return false bit basically means (I think) don't come back here because control will pass to the new window
img	The img (smallfile.jpg in the subfolder thumbs) is inside the A tag. The picture has settings for width, height, and "alt" - if you hover the mouse over the picture, this text will pop-up; if the picture isn't viewable, this text will appear in its place.

 

The source material

I don't have years of programming experience. Didn't come up with this on my own. Got a little help from elsewhere. Two places mainly:

http://javascript.internet.com/page-details/auto-resizable-pop-up.html
Author: Andrea Ferrari (ferrariand\at\libero.it)

Original code is here:
http://digilander.libero.it/ferrariand/gallery.htm
View the source - ever seen JavaScript in Italiano?

. . . and . . .

 

Doc JavaScript (Yehuda Shiran and Tomer Shiran)

www.webreference.com/js

Closing

I'm confident this (the function and the presentation) can be done better, got any ideas?

Was this article worthwhile? See the menu at upper right for more code used on this site - including how to do the menu. If you use these ideas on your site, I'd love to know.

Since March 2003, this page has seen by about 150-800 visitors each month.

 

My nifty email form stopped working ... but you can still send me email if you would like to.

Original page posted: February 18, 2003. Links tested: May 24, 2008. Last tweaked: July 24, 2007.

The address for this page is [ www.therotunda.net/code/autosized-popup-window.html ]
 
Nothing on my Web site is the official publication of anyone else. Unauthorized use for profit is not permitted.