I'm looking to implement fancybox within my DataTable. I want to be able to click on the link that is stored in my database and render the stored page within my datatable within a iframe/fancybox and be able to interact with that page. I do not want to be able to see the page unless clicked on.
I'm not completely sure if fancybox is the appropriate choice for this feature and any increased efficiency that can be added to my interpretation of datatables would be awesome. I know I'm asking for a lot.
<?php
$con = mysql_connect("localhost", "root", "root");
if(!$con){
die("Error: ".mysql_error());
}
mysql_select_db("Test_Data", $con);
$result = mysql_query("SELECT * FROM Test_DataSet");
?>
<html>
<head>
<title>TEST TABLE</title>
<meta http-equiv="Content-Type" content="text/hmtl; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="DataTables-1.10.1/media/js/jquery.js" type="text/javascript"></script>
<script src="DataTables-1.10.1/media/js/jquery.DataTables.js" type="text/javascript"></script>
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<style type="text/css">
@import "DataTables-1.10.1/media/css/jquery.dataTables.css";
</style>
<style type="text/css">
@import "DataTables-1.10.1/examples/resources/bootstrap/3/dataTables.bootstrap.css";
</style>
<script type="text/javascript" charset="UTF-8">
$(document).ready(function(){
$('#datatables').dataTable();
})
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<script>
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 1600,
maxHeight : 1200,
fitToView : true,
width : '100%',
height : '100%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
<script>
jQuery(document).ready(function () {
$('a.modalGeneric').fancybox({
type: 'iframe',
fitToView: true,
autoSize: true,
openEffect: 'fade',
openSpeed: 'slow'
});
});
</script>
<style> iframe{border: none; width: 20}</style>
</head>
<body>
<div>
<table id="datatables" class="hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>Building</th>
<th>Floor</th>
<th>Number of AP</th>
<th>Associated Floor Plans</th>
<th>View on WebPage</th>
</tr>
</thead>
<tbody>
<?php
while($row = mysql_fetch_assoc($result)){
?>
<tr class ="odd gradeX">
<td><?php echo $row['Building']; ?></td>
<td><?php echo $row['Floor']; ?></td>
<td><?php echo $row['Number_Of_AP']; ?></td>
<td><?php echo '<a class="various fancybox.iframe” href="'.$row['Associated_Floor_Plans'].'" target="_blank">'.$row['Associated_Floor_Plans'].'</a>';?></td>
<td><?php echo '<a class="various fancybox.iframe” href="'.$row['View_On_Webpage'].'" target="_blank">View in AMP<'.$row['View_On_Webpage'].'</a>';?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</body>
</html>
Thank you for any help contributed. Please feel free to scrutinize my work.
