pues ai te va un ejemplo no es tanto php pero pues de ajax tu pon las imagenes que quieras jeje solo que utilizo protocoulous pero espero que le entiendas jejejeje
Código PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="stilo.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="scripts/protoculous.js"></script>
<script type="text/javascript">
document.observe("dom:loaded", inicialisar);
function inicialisar(){
$("contenedor").hide();
}
function abrir(nombre){
var url="pagina.php?nombre="+nombre;
var ajax = nuevoAjax();
ajax.open("GET",url,true);
ajax.onreadystatechange=function(){
if(ajax.readyState==1){
}
if(ajax.readyState==4){
$("info").innerHTML = ajax.responseText;
$("contenedor").show();
new Effect.BlindDown("info");
}
}
ajax.send(null);
}
function nuevoAjax()
{
var xmlhttp=false;
try{xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");}
catch(e){
try{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
catch(E){
if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
}
}
return xmlhttp;
}
function fotos(nombre){
$('fotoprincipal').src=nombre;
new Effect.BlindDown('divfoto');
}
function cerrar(){
$('contenedor').hide();
}
function delay(){
setTimeout('afterFiveSeconds()',5000)
}
function afterFiveSeconds(){
alert("after 5 seconds");
}
</script>
</head>
<body>
<div id="contenedor">
<div id="hideshow">
<div id="fade"></div>
<div class="popup_block" id="info">
</div>
</div>
</div>
<p> </p>
<table width="400" border="0" align="center" cellpadding="5" class="borde">
<tr>
<td><div align="center" class="bordefoto"><a href="javascript:abrir('13330irt355nsimg600x450106766054318_7_.jpg')"><img src="13330irt355nsimg600x450106766054318_7_.jpg" width="100" height="100" border="0"></a></div></td>
<td><div align="center" class="bordefoto"><a href="javascript:abrir('Carros4.jpg')"><img src="Carros4.jpg" width="100" height="100" border="0"></a></div></td>
<td><div align="center" class="bordefoto"><a href="javascript:abrir('SmileWallpapers.jpg')"><img src="SmileWallpapers.jpg" width="100" height="100" border="0"></a></div></td>
</tr>
</table>
<div align="left"><a href="javascript:delay()">Esto es un link</a></div>
</body>
</html>
pagina.php
Código PHP:
<?php
$nombre=$_GET['nombre'];
?>
<table width="600" border="0" class="bordeblanco" bgcolor="#000000">
<tr>
<td colspan="3"><div align="right"><a href="javascript:cerrar()"><img src="cross.png" border="0"></a></div></td>
</tr>
<tr>
<td width="70%" rowspan="2" valign="top"><div align="center" id="divfoto"><img src="<?php echo $nombre;?>" id="fotoprincipal" width="450" height="300"></div></td>
<td valign="top" class="td"><a href="javascript:fotos('<?php echo $nombre;?>')"><img src="<?php echo $nombre;?>" width="100" height="100" border="0"></a></td>
<td valign="top" class="td"><a href="javascript:fotos('Carros4.jpg')"><img src="Carros4.jpg" width="100" height="100" border="0"></a></td>
</tr>
<tr>
<td colspan="2" valign="top" class="blanco">HTML<br>
What I have below is a div that contains the transparent black background, and the popup on top of it. I basically have two layers on top of my content to achieve this effect.
</td>
</tr>
</table>