无法让fancybox缩略图工作

Question

所以我觉得我已经尝试了所有东西，但却无法让fancybox缩略图工作。这是我的代码：

JavaScript的：

$(document).ready(function() {
    $(".fancybox-thumb").fancybox({
            prevEffect  : 'none',
            nextEffect  : 'none',
            helpers : {
                title   : {
                    type: 'outside'
                },
                thumbs  : {
                    width   : 200,
                    height  : 200,
                    position:'top'
                }
            }
     });
});

HTML：

<a class="fancybox-thumb" rel="fancybox-thumb" href="Images/royalty.jpg" title="Simple Cake">
    <img src="Images/royalty.jpg" alt="" />
</a>

<a class="fancybox-thumb" rel="fancybox-thumb" href="http://lorempixel.com/output/business-q-c-50-50-10.jpg">
    <img src="Images/royalty.jpg" alt="" />

我知道它有点小但是我已经完成了文档但只是不明白......我在这里缺少什么？我得到的基本照片要显示，但没有缩略图。这里的任何帮助将不胜感激。