Many times web designers don't want to show large pictures on the Internet because it takes to much bandwidth or there not enough room on the page.
A solution to this is to display smaller pictures where people can click on to see the larger version.
This smaller picture is called a thumbnail.
The next script is a JavaScript that displays the enlarged picture in a separate popup window.
Popup windows in general are very irritating because they tend to fill up the windows task bar.
So some precaution have been taken so only one popup will be shown at any time.
Also when the user leaves the page the popup should close.
When designing the script I discovered some problems with some browser (versions).
Never the less this script will function for the majority of browsers (Netscape and Ms Explorer)
The problems I encounter where related to the Opera browser which doesn't seem to handle document.close() correctly.
Opera Version 5.12, Build 932, PlatformWin32, System Windows NT 4.0
But most likely it will fail on other Opera versions and Operating system combinations.
Never the less I added a workaround for this.
The workaround involves using a PHP page instead of trying to use a document.close() to start the browser loading the enlarged picture.
If don't want to use a PHP page use version 2.
Off course your provider's web server should support PHP.
Example:
Here is version 1 with the PHP script:
Add this at the <head> section of your html page
|
<script language="JavaScript"> <!-- // Thumbnail Script // (c) RJHM van den Bergh/comweb.nl, 2001 // support@comweb.nl // // This script opens a enlarge picture of a thumbnail. // With the onUnload you can close the enlarged thumbnail when the user leaves the page. // var popupHandle; function popup(picUrlString, windowWidth, windowHeight) { // always close the old one , so only one at a time is open if(popupHandle || popupHandle!=null) { if (!popupHandle.closed) popupHandle.close(); } popupHandle=null; // create a feature string for the popup var x=(screen.width-windowWidth)/2 var y=(screen.height-windowHeight)/2 var featureString = "toolbar=no,scrollbars=no,resizable=no" featureString = ',left='+x + ',top='+y featureString += ',width='+windowWidth+',height='+windowHeight // open the popup // We use a php script to work arround some browser specific problems // Opera doesn't seem to handle document.close() correctly on the popup. popupHandle = window.open( "popup.php3?windowWidth="+windowWidth+"&windowHeight="+windowHeight+"&picUrlString="+picUrlString ,"popup",featureString) return popupHandle; } function winclose() { if (window.popupHandle!=null && !window.popupHandle.closed) { window.popupHandle.close(); } } function doNothing(){} // does nothing but required by JavaScript in this case //--> </SCRIPT> |
To be sure that the popup closes when you leave the page add this JavaScript call at the body tag.
|
<BODY onUnload="winclose();"> |
The next thing we need to do is add the thumbnail and JavaScript call to the html page.
|
<A HREF="JAVASCRIPT:doNothing();" onclick="popupHandle=popup('my_large_picture.jpg','512','315')" > <IMG SRC="my_small_picture.jpg" onmouseover="window.status='Click to enlarge'; return true;" onmouseout="window.status=''" border="0" WIDTH="200" HEIGHT="123" TITLE="Click to enlarge"> </A> |
You also need to create a PHP page.
I'll not explain the details to you because there are better resources for that.
So here is the PHP page I use:
|
<HTML> <HEAD> <TITLE>Click to close.</TITLE> </HEAD> <BODY marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgcolor=black text="white" onclick="self.close()"> <A HREF="javascript:window.close();" title="Close." > <IMG SRC="<? echo htmlspecialchars($_GET['picUrlString']); ?>" BORDER="0" WIDTH="<? echo (int)$_GET['windowWidth']; ?>" HEIGHT="<? echo (int)$_GET['windowHeight']; ?>"></A> </BODY> </HTML> |
Well that's all to it
But unfortunately many of us will not have a provider that supports PHP.
If it supports ASP then you could replace the PHP by ASP.
PHP and ASP are almost identical except PHP is used on UNIX while ASP is used on Microsoft servers.
Off course good old Perl CGI can do the trick also.
Version 2 of the script without PHP
For those who have disabilities :-)
(Doesn't work with Opera)
|
<script language="JavaScript"> <!-- // Thumbnail Script // (c) RJHM van den Bergh/comweb.nl, 2001 // support@comweb.nl // // This script opens a enlarge picture of a thumbnail. // With the onUnload you can close the enlarged thumbnail when the user leaves the page. // var popupHandle; function popup(picUrlString, windowWidth, windowHeight) { // Always close the old one, so only one at a time is open if(popupHandle || popupHandle!=null) { if (!popupHandle.closed) popupHandle.close(); } popupHandle=null; // create a feature string for the popup var x=(screen.width-windowWidth)/2 var y=(screen.height-windowHeight)/2 var featureString = "toolbar=no,scrollbars=no,resizable=no" featureString = ',left='+x + ',top='+y featureString += ',width='+windowWidth+',height='+windowHeight // html content of the popup var htmlString = "<html><head><title>Click to close.</title></head>" htmlString += "<body marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 bgcolor=black text=\"white\" onclick=\"self.close()\">" htmlString += "<A HREF=\"javascript:window.close();\" title=\"Close.\" >" htmlString += "<IMG SRC=\"" + picUrlString + "\" BORDER=\"0\" WIDTH=" + windowWidth + " HEIGHT=" + windowHeight + "></A>" htmlString += "</body></html>" popupHandle = window.open("" ,"popup",featureString) popupHandle = window.open("" ,"popup") popupHandle.document.clear(); popupHandle.document.writeln(htmlString); popupHandle.focus(); popupHandle.document.close(); // should trigger the picture loading. return popupHandle; } function winclose() { if (window.popupHandle!=null && !window.popupHandle.closed) { window.popupHandle.close(); } } function doNothing(){} // does nothing but required by JavaScript in this case //--> </SCRIPT> |
This is the only thing you need to change, if you don't have PHP