Popup Windows

8. Thumbnail Image Popups

Enough of the theory. It is time to take a loop at how we can apply all of what we have learned in the prior tutorials to create a popup window.

One problem faced by many web sites is that of displaying images. For the image to be large enough to be useful it ends up being 40k - 50k in overall size. This is about as big as we want to make our entire web page and we have used it all up with one image. This is not the most useful thing to do if we require our visitors to download the entire image before they can decide if it is the one that they want.

The solution is to place a smaller (thumbnail) version of the image onto the web page that is big enough for for visitors to tell what it is (about 1k images are usually big enough for that). We then use that image as a link that will create a popup window to display the larger version of the image.

Here is an example:

If you click on the picture of me to the left then a new popup window will open that will contain a larger version of the same photo. Note that these are two separate image files.

To create this popup window we use the following code most of which should look quite familiar to you by now:

<script type="text/javascript">
function goImgWin(myImage,myWidth,myHeight,
origLeft,origTop) {
myHeight += 24;
myWidth += 24;
TheImgWin = window.open(myImage,'image','height=' +
myHeight + ',width=' + myWidth +
',toolbar=no,directories=no,status=no,' +
'menubar=no,scrollbars=no,resizable=no');
TheImgWin.resizeTo(myWidth+2,myHeight+30);
TheImgWin.moveTo(origLeft,origTop);
TheImgWin.focus();
}
</script>

The script can be used exactly as shown above to handle multiple thumbnail images of any sizes on your page. Only the code to call the function will change to reflect the size of the image to be displayed and where on the screen that you want to display it.

The actual HTML code for the thumbnail image that I used in the example looks like this:

<a href="graphics/convent.jpg" target="_blank"
onclick="goImgWin('graphics/convent.jpg',240,302,100,50);
return false;"><img src="graphics/convent_t.jpg"
width="57" height="72" border="1"
alt="Picture of Stephen Chapman at the AMRA 50th Anniversary Convention" align="left" /></a>

Note that the width and height in the call to goImgWin match exactly that of the larger image to be opened in that window (so as to open a browser window of an appropriate size). All you need to do is to change the images and image sizes specified to reflect your requirements.

Using this script I have managed to create thumbnail image galleries of 50 images on one page that is still less than 80k total size.