| mdviky87 |
03-23-2012 02:36 PM |
fancybox not working
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==4 && 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 <span class="bold">Square feet:</span>xxxx <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>
|
