使用FancyBox

Question

我正在尝试为当前正在进行中的网站的照片部分添加精美的方框...

当我点击图像时，它不会像它应该显示的那样出现。相反，它会转到自己单独的URL来显示图像。

我曾尝试过观看一些教程视频来提供帮助但没有任何效果。我相信我拥有所有正确的代码（至少前两张图片）。

请您查看我的代码并尽可能地帮助我？ http://www.chrislcarrier.com/photos.html

这是我的代码。

<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>