its not php but javscript if it helps,
http://www.js-examples.com/example/?ex=1007
Auto-Size Image popups
What to make an image clickable to view it larger?
This script is a combination of ideas which enable one to popup an image popup page which contains a Close button and an image.
The popup is automatically resized to suit the image.
You can also configure an image Title as well.
<html>
<head>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
1000s of free ready to use scripts, tutorials, forums.
Author: bindu - http://www.starwon.com.au/~soham
-->
<title>Page with Picture - Click to show bigger</title>
<script>
var PAGE="";
PAGE=""; / Specify an actual page if you don't want to use the popup code. /
var _CONTENT=""; / this holds the data to write if no external html file is used /
function openImageWindow(imageSrc,imageTitle)
{
/
if you use the name "PAGE" for the page
you will have no problems at all
however if you change the name to something else
remember to change the reference to it in the following line of code
to reference your own filename..
No PAGE specified uses the javascript code embedded on this page.
/
CONTENT="";
CONTENT+="<HTML>\n";
CONTENT+="<head>\n";
CONTENT+="<"+"SCRIPT>\n";
CONTENT+="function specialInit()\n";
CONTENT+="{\n";
CONTENT+="if (document.all || document.layers)\n";
CONTENT+="window.resizeTo(document.images[0].width + 50,document.images[0].height + 180);\n";
CONTENT+="}\n";
CONTENT+="</"+"SCRIPT>\n";
CONTENT+="</head>\n";
CONTENT+="<BODY onLoad='specialInit();'>\n";
CONTENT+="<"+"SCRIPT>\n";
CONTENT+="document.write('<center>');\n";
CONTENT+="document.write('<b><font color=\'#ffffff\'>');\n";
CONTENT+="document.write('<span style=\'BACKGROUND-COLOR:#0000ff\'> ');\n";
CONTENT+="document.write('"+imageTitle+"' +' </span></font></b><HR>');\n";
CONTENT+="document.write('<IMG SRC=\'"+imageSrc+"\'>');\n";
CONTENT+="document.write('<HR><P><P><P><FORM><INPUT TYPE=button VALUE=Close onClick=window.close()></FORM>');\n";
CONTENT+="document.write('</center>')\n";
CONTENT+="</"+"SCRIPT>\n";
CONTENT+="</BODY>\n";
_CONTENT+="</HTML>\n";
var parms = 'directories=no,location=no,menubar=no,scrollbars=no,status=no,toolbar=no,resizable=yes';
var windowName = "PicViewer";
if(PAGE)
{
fileName = 'popup.htm?' + escape(imageSrc) + '&' + escape(imageTitle);
myWindowHandle = window.open(fileName,windowName,parms);
}
else
{
myWindowHandle=window.open("",windowName,parms);
myWindowHandle.document.open();
myWindowHandle.document.write(CONTENT);
myWindowHandle.document.close();
}
myWindowHandle.focus();
}
</script>
</head>
<body>
<!--here you can reference any image you like in any file you like.
you could even use it under abutton etc... My self i use it in a shopping cart to popup
a large image of a thumbnail..
-->
Click on this very small image -- it will popup a bigger window and show the image with the title of the image.
<IMG onclick="openImageWindow('http://www.js-x.com/js/pic3.gif','Color Ball')" height=10 src="http://www.js-x.com/js/pic3.gif" width=10 border=0>
<!--
-- This entire HTML block can be used as an external file.
-- Be sure to make the _PAGE variable point to this file.
<HTML>
<head>
function specialInit()
{
if (document.all || document.layers)
window.resizeTo(document.images[0].width + 50,document.images[0].height + 180);
}
</head>
<BODY onLoad='specialInit();'>
<script>
var passed = location.search ? unescape(location.search.substring(1)) + '&' : '';
var imageSrc = passed ? passed.substring(0,passed.indexOf('&')) : 'http://js-x.com/js/pic4.gif';
passed = passed.substring(passed.indexOf('&')+1);
var imageTitle = passed ? passed.substring(0,passed.indexOf('&')) : 'Default Title';
document.write('<center>');
document.write('<b><font color=\'#ffffff\'>');
document.write('<span style=\'BACKGROUND-COLOR:#0000ff\'> \;');
document.write(imageTitle +'  \;</span></font></b><HR>');
document.write('<IMG SRC=\'' + imageSrc + '\'>');
document.write("<HR><P><P><P><FORM><INPUT TYPE='button' VALUE='Close' " + "onClick='window.close()'></FORM>");
document.write('</center>')
</script>
</BODY>
</HTML>
-->
<BR><center><a href='http://www.js-examples.com'>JS-Examples.com</a></center>
</body>
</html>
