Image Popups from Thumbnails

Popups that displays enlarged versions of thumbnail images.

This function creates tight popup windows with images (and no white border) from thumbnails. The popup closes when it loses focus.

Here is an example of the
thumbnail-to-popup function:

Click on the thumbnail to launch a popup window:

$images\tara.jpg$

Here's the script, and a bit of How-To:

1) First, we build the page that will display the images. Then, we use a query string to pass the image name to the page.

File: imagewindow.htm:

<HTML>

<HEAD>

<TITLE>Image page: Click outside this window to close it... </TITLE>

<!--

var lngth = (window.location.search.substring().length);

var imagename = (window.location.search.substring(1, (lngth)));

//-->

</SCRIPT>

</HEAD>

<!--

document.write("<IMG src='images/" + imagename + "' border=0>");

//-->

</SCRIPT>

</BODY>

</HTML>

2) We include this .js file. This function calls a clean window of a certain size, with the image_strng parameter. Scroll further down to see how to call the popup.

File: cleanwindow.js

var newWHwindow, WHwindow = null;

var Scrll ="no";

var Winheight = 663;

var Winwidth = 801;

var w_top = (screen.height - Winheight - 25);

var w_left = (screen.width - Winwidth - 10);

function CleanWindow(image_strng)

{

var URL_strng = ("imagewindow.htm?" + image_strng);

var W_basic = "'location=no";

W_basic += ",toolbar=no";

W_basic += ",menubar=no";

W_basic += ",scrollbars=";

W_basic += Scrll;

W_basic += ",status=no";

W_basic += ",resizable=yes";

W_basic += ",top=";

W_basic += w_top;

W_basic += ",left=";

W_basic += w_left;

W_basic += ",width=";

W_basic += Winwidth;

W_basic += ",height=";

W_basic += Winheight;

W_basic += "'";

WHwindow=window.open(URL_strng, newWHwindow, W_basic);

}

3) We call it. Having created both the imagewindow.htm and cleanwindow.js, you can create a popup window like this:

<A onclick="CleanWindow('large_version_image.jpg');"

href="javascript:void(0);"><IMG height=169

alt="Click to see large version."

src="thumbnail.gif"></A>

Thanks…

And if you use this script on your website or other publication, be sure to provide credit to Copperfield Publishing, and a link to us, please.