Gallery using FancyBox - fancybox

Question

I'm trying to add fancy box to the photos part of my website currently in progress...
When i click on the image it doesn't show up like it is supposed to. Instead, it goes to its own separate url to show the image.
I have tried watching a few tutorial videos to help but nothing has worked. I believe I have all the right code (for the first two images at least).
Could you please look at my code and assist me in anyway possible?
http://www.chrislcarrier.com/photos.html
This is my code.
<link rel="stylesheet" href="css/bootstrap.css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <link href="img/glyphicons-halflings-regular.svg">
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.4/…;
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancyImg").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'width' : 1200px,
'height' : 800px,
'overlayShow' : false
});
});
</script>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6 col-xs-12">
<a class="fancyImg" href="img/water.png">
<img id="move" src="img/water_small.jpg" alt="">
</a>
<hr class="hidden-lg">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<a class="fancyImg" href="img/flower_large.jpg">
<img id="move2" src="img/flower_small.jpg" alt="">
</a>
<hr class="hidden-lg">
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
<a href="#">
<img id="move3" src="img/view_small.jpg" alt="">
</a>
</div>
</div>