You can make one static page and update the img dynamically.
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Imagetoolbar" content="no" />
<title>Image Popup</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#000;
color:#FFF;
}
a, a:link, a:visited {
color:#FFF;
background-color:inherit;
text-decoration:underline;
}
a:hover, a:active {
text-decoration:none;
}
#imghold {
border:1px solid #FFF;
background-color:#06F;
text-align:center;
color:#000;
display:none;
padding:4px;
position:absolute;
top:50%;
left:50%;
}
#imghold img {
border:1px solid #FFF;
cursor:pointer;
}
#imghold a {
height:20px;
display:block;
line-height:20px;
}
</style>
<script type="text/javascript">
var url;
function popUp(imgwid,imghgt)
{
var hgt = imghgt + 20;
var sw = (screen.width - imgwid) / 2;
var sh = (screen.height - hgt) / 2;
imgwin = window.open('img.html','imgwin','width='+imgwid+',height='+hgt+',top='+sh+',left='+sw+',resizable=1, scrollbars=0,menubar=0,toolbars=0');
if(imgwin)
{
imgwin.window.close();
imgwin = window.open('img.html','imgwin','width='+imgwid+',height='+hgt+',top='+sh+',left='+sw+',resizable=1, scrollbars=0,menubar=0,toolbars=0');
}
imgwin.focus();
}
</script>
</head>
<body>
<div>
<a href="http://students.db.erau.edu/~rodri97f/test/cookies.jpg" onclick="popUp(355,266);url=this.href;return false">Cookies</a><br />
<a href="http://students.db.erau.edu/~rodri97f/test/night.jpg" onclick="popUp(355,266);url=this.href;return false;">Night Time</a><br />
<a href="http://students.db.erau.edu/~rodri97f/test/speaker.jpg" onclick="popUp(201,266);url=this.href;return false;">Speakers</a>
</div>
</body>
</html>
img.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image Preview</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
font-size:0.85em;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#FFF;
color:#FFF;
}
a, a:link, a:visited {
color:#000;
background-color:inherit;
text-decoration:underline;
}
a:hover, a:active {
text-decoration:none;
}
#imghold {
text-align:center;
}
#imghold img {
display:block;
margin:auto;
cursor:pointer;
}
#imghold a {
height:20px;
display:block;
line-height:20px;
}
</style>
<script type="text/javascript">
if(!opener)
{
window.location = "test.html";
}
if(opener)
{
onload = function()
{
document.getElementById('theimg').setAttribute('src',opener.url);
}
}
</script>
</head>
<body>
<div id="imghold"><img id="theimg" alt="" onclick="window.close()" /><a href="#" onclick="window.close();return false">Close</a></div>
</body>
</html>
The above will check to see if the img.html page was opened as a popup. If it wasn't it redirects back to test.html or w/e page you like.
This checks