Fancybox not functioning when website is uploaded to server

Can someone help me please, I've uploaded a website to a server and it is not functioning properly. On my computer its working fine and I tested it on a friends windows machine as well. What's happening is fancybox is not working and the image is just opening the way plain old html would open an image.

Secondly there is a folder inside the 'img' folder called 'ads' and all the images in this folder are not linking where they should when the site is online. Here is the head of the page that should be working, did I miss anything:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/animate.css">
        <link rel="stylesheet" href="css/jquery.fancybox.css">

        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/jquery.fancybox.js"></script>
        <script type="text/javascript" src="js/jquery.smoothState.js"></script>
        <script type="text/javascript">

        function pageload(){
        $(function() {
            $('#recentwork div').each(function(i) {
                $(this).delay((i++) * 75).fadeTo(1000, 1); })
            });
        };

        window.onload = pageload();

        $(document).ready(function() {
            $(".img_tn_web a").fancybox();
        });


        </script>
    </head>

EDIT: I am currently getting this error when I check the site on firebug

TypeError: $(...).fancybox is not a function

But I am including the link to the fancybox js file so I am not sure where it is going wrong

thanks

Solution

Remove your fancybox js file from header and add below to the jQuery library file like below. Your header part should be like below.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/animate.css">
        <link rel="stylesheet" href="css/jquery.fancybox.css">

        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/jquery.smoothState.js"></script>
        <script type="text/javascript">

        function pageload(){
        $(function() {
            $('#recentwork div').each(function(i) {
                $(this).delay((i++) * 75).fadeTo(1000, 1); })
            });
        };

        window.onload = pageload();

        $(document).ready(function() {
            $(".img_tn_web a").fancybox();
        });


        </script>
    </head>

and add to the footer like below.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script src="js/plugins.js"></script>
    <script src="js/main.js"></script>