Why is this:
HTML Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
* {
 margin: 0;
 padding: 0; 
}
html,
body {
 width: 100%;
 height: 100%; 
}

body {
 background: #CCC; 
}
#menu {
 display: block;
 margin: 100px auto; 
}
</style>
<link
      rel="stylesheet"
      type="text/css"
      href="css/jquery.fancybox.css"> 
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <script type="text/javascript" src="js/site/jquery.fancybox-1.3.4.pack.js"></script>
</head>
<body>
<ul id="menu">
  <li><a class="various fancybox.ajax" href="content.php">Ajax</a></li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
    $(".various").fancybox({
        maxWidth    : 800,
        maxHeight   : 600,
        fitToView   : false,
        width       : '70%',
        height      : '70%',
        autoSize    : false,
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none'
    });
});
</script>
</body>
</html>
not functioning while I have it straight from the Fancybox website and all things(plugins css and images) are in place. Instead of opening content in Fancybox It opens by it self as you can see here