i am having a file reals.php
on clicking search it goes to getdetail.php using ajax.

when i click the image it goes to that image file not opening fancy box


But the fancy box is working in getdetail.php not by ajax call
i mean opeing getdetail.php separately



reals.php

PHP Code:
<!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>
<
script type="text/javascript">
function 
show()
{
var 
city=document.myform.cities.value;
var 
area=document.myform.area.value;
if (
area=="")
  {
  
document.getElementById("sodetail").innerHTML="";
  return;
  } 
if (
window.XMLHttpRequest)
  {
// code for IE7+, Firefox, Chrome, Opera, Safari
  
xmlhttp=new XMLHttpRequest();
  }
else
  {
// code for IE6, IE5
  
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (
xmlhttp.readyState==&& xmlhttp.status==200)
    {
    
document.getElementById("sodetail").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getdetail.php?q="+area+"&ct="+city,true);
xmlhttp.send();
}
</script>

<style type="text/css">
body{
font-family:"Times New Roman", Times, serif;
}
</style>
</head>
<body>

<form name="myform"> <h3 style="text-align:center">Real Estate</h3>
<label for="cty">City</label>

<select name="cities">
<option>Select City</option>
<option value="Madurai">Madurai</option>
<option value="Chennai">Chennai</option>
</select>

<label for="ara">Area</label>

<input name="area" type="text" ><br><br>
<input name="sub" type="button" value="Search" onClick="show();"><br>

<div id="sodetail"></div>        
</form>
<br />

</body>
</html> 


getdetail.php

PHP Code:
<!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>
<style type="text/css">
.spec{ margin-left:90px; margin-top:-60px;
}

span.bold{font-weight:bolder;
}

.more{right:168px; bottom:315px;
}

.nxt{margin-left:5px; 
}
.prev{margin-right:5px;
}
/*web page content*/
.results{ border:3px ridge #f1f1f1;
background-color:#FFCCCC;

margin-left:150px;
width:700px;
height:150px;
}

.area{ text-align:center; border:1px solid black;
}

.thumbnail{background-color:#FFFFFF;
margin-left:5px;
width:75px;
margin-bottom:10px;
margin-top:10px;
font-size:14px;
}

.desc{ margin-left:92px; margin-top:15px;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>

<script type="text/javascript" src="jquery.fancybox-1.3.4.pack.js"></script>

<link rel="stylesheet" href="jquery.fancybox-1.3.4.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
    $("a#single_image").fancybox();    
});
</script>
</head>
<body>
<?php
$srch 
$_REQUEST['q'];
$city $_REQUEST['ct'];
echo 
"<h4>Search results</h4>";
?>
<div class="results">
    <div class="area"><?php echo $srch ." , "$city?></div>
    <div class="thumbnail">
        <a id="single_image" href="1_b.jpg">
        <img src="1_s.jpg" alt="">
        </a>
    </div>
    <div class="spec"><span class="bold">Price:</span>xxxx &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="bold">Square feet:</span>xxxx &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="bold">Contact:</span>xxxx
    </div>
    <div class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been sum is simply dummy text of the printing and ...
    <a class="more" href="#">read more</a>
    </div>
</div>
<!--<table width="82%" height="112" border="1" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <th colspan="3" scope="col"></th>
  </tr>
  <tr>
  
<td width="11%" height="77"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
        <img src="31297Sunset.jpg" alt="image">
        </a>    </td>
    
    <td width="15%"><div id="spec">Price:xxxx Square feet:xxxx</div></td>
    <td width="74%">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of <a class="more" href="#">read more</a></td>
  </tr>
</table>
-->
<?php include("mypagination.php"); ?>
</body>
</html>