画廊内的Fancybox导航无法正常工作

Question

我有以下缩略图库：

  <div class="row">
        <div class="col-lg-3">
            <a class="fancybox" href="img/projects/glob/1.jpg" rel="gallery1">
                <img class="img-responsive" src="img/projects/glob/thumb1.jpg" alt="">
            </a>
        </div>

        <div class="col-lg-3">
            <a class="fancybox" href="img/projects/glob/2.jpg" rel="gallery1">
                <img class="img-responsive" src="img/projects/glob/thumb2.jpg" alt="">
            </a>
        </div>

        <div class="col-lg-3">
            <a class="fancybox" href="img/projects/glob/3.png" rel="gallery1">
                <img class="img-responsive" src="img/projects/glob/thumb3.png" alt="">
            </a>
        </div>

        <div class="col-lg-3">
            <a class="fancybox" href="img/projects/glob/4.png" rel="gallery1">
                <img class="img-responsive" src="img/projects/glob/thumb4.png" alt="">
            </a>
        </div>
    </div>

    <div class="row" style="margin-top: 3vh">
        <div class="col-lg-3">
            <a class="fancybox" href="img/projects/glob/5.png" rel="gallery1">
                <img class="img-responsive" src="img/projects/glob/thumb5.png" alt="">
            </a>
        </div>

        <div class="col-lg-3">
            <a class="fancybox" href="img/projects/glob/6.png" rel="gallery1">
                <img class="img-responsive" src="img/projects/glob/thumb6.png" alt="">
            </a>
        </div>

        <div class="col-lg-3">
            <a class="fancybox" href="img/projects/glob/7.png" rel="gallery1">
                <img class="img-responsive" src="img/projects/glob/thumb7.png" alt="">
            </a>
        </div>

        <div class="col-lg-3">
            <a class="fancybox" href="img/projects/glob/8.png" rel="gallery1">
                <img class="img-responsive" src="img/projects/glob/thumb8.png" alt="">
            </a>
        </div>
    </div>

    <div class="row" style="margin-top: 3vh">
        <div class="col-lg-3">
            <a class="fancybox" href="img/projects/glob/9.png" rel="gallery1">
                <img class="img-responsive" src="img/projects/glob/thumb9.png" alt="">
            </a>
        </div>
    </div>

如您所见，导航箭头显示正确：

但是，一旦我点击箭头，我只看到一张空白图片：

fancybox功能位于.js文件中......

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

...加载到页面的头部：

<script src="js/main.js" defer></script>