title: Adding Fancybox to Datatables
body: <p>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. </p>
  
  <p>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. </p>
  
  <pre><code>&lt;?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");
  ?&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;TEST TABLE&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/hmtl; charset=UTF-8"&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="DataTables-1.10.1/media/js/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="DataTables-1.10.1/media/js/jquery.DataTables.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" /&gt;
      &lt;script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" /&gt;
      &lt;script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" /&gt;
      &lt;script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js"&gt;&lt;/script&gt;
  
  
      &lt;style type="text/css"&gt;
          @import "DataTables-1.10.1/media/css/jquery.dataTables.css";
      &lt;/style&gt;
      &lt;style type="text/css"&gt;
      @import "DataTables-1.10.1/examples/resources/bootstrap/3/dataTables.bootstrap.css";
      &lt;/style&gt;
  
  
      &lt;script type="text/javascript" charset="UTF-8"&gt;
          $(document).ready(function(){
              $('#datatables').dataTable();
          })
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              $(".fancybox").fancybox();
          });
      &lt;/script&gt;
  
      &lt;script&gt;
          $(document).ready(function() {
              $(".various").fancybox({
                  maxWidth    : 1600,
                  maxHeight   : 1200,
                  fitToView   : true,
                  width       : '100%',
                  height      : '100%',
                  autoSize    : true,
                  closeClick  : false,
                  openEffect  : 'none',
                  closeEffect : 'none'
              });
      });
      &lt;/script&gt;
  
  
      &lt;script&gt;
          jQuery(document).ready(function () {
              $('a.modalGeneric').fancybox({
                  type: 'iframe',
                  fitToView: true,
                  autoSize: true,
                  openEffect: 'fade',
                  openSpeed: 'slow'
              });
      });
      &lt;/script&gt;
      &lt;style&gt; iframe{border: none; width: 20}&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
           &lt;table id="datatables" class="hover" cellspacing="0" width="100%"&gt;
               &lt;thead&gt;
                   &lt;tr&gt;
                      &lt;th&gt;Building&lt;/th&gt;            
                      &lt;th&gt;Floor&lt;/th&gt;
                      &lt;th&gt;Number of AP&lt;/th&gt;
                      &lt;th&gt;Associated Floor Plans&lt;/th&gt;
                      &lt;th&gt;View on WebPage&lt;/th&gt;
                   &lt;/tr&gt;
               &lt;/thead&gt;
               &lt;tbody&gt;
                  &lt;?php
                  while($row = mysql_fetch_assoc($result)){
                  ?&gt;
                  &lt;tr class ="odd gradeX"&gt;
                      &lt;td&gt;&lt;?php echo $row['Building']; ?&gt;&lt;/td&gt;             
                      &lt;td&gt;&lt;?php echo $row['Floor']; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo $row['Number_Of_AP']; ?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo '&lt;a class="various fancybox.iframe”  href="'.$row['Associated_Floor_Plans'].'" target="_blank"&gt;'.$row['Associated_Floor_Plans'].'&lt;/a&gt;';?&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;?php echo '&lt;a class="various fancybox.iframe” href="'.$row['View_On_Webpage'].'" target="_blank"&gt;View in AMP&lt;'.$row['View_On_Webpage'].'&lt;/a&gt;';?&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;?php
                  }
              ?&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thank you for any help contributed. Please feel free to scrutinize my work.</p>