我看不到fancybox中的按钮

Question

我已经将fancybox加载到我的页面中，使用正确的脚本和css文件，但我仍然看不到按钮。我插入了一些编码。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/jquery.fancybox-buttons.css" type="text/css" media="screen" />

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox-button").fancybox({
        prevEffect      : 'none',
        nextEffect      : 'none',
        closeBtn        : false,
        helpers     : {
            title   : { type : 'inside' },
            buttons : {}
        }
    });
});
</script>

这是我的图片专栏：

<a class="fancybox-button" rel="gallery1" href="Copy Photos/F-35.jpg" title="F-35"><img src="Thumbnail Photos/F-35.jpg" alt="" /></a>

请注意，我的班级标签上写着“花式按钮”而不是“花式按钮”。我尝试改为花式按钮，但图像显示为常规图片而不是花哨的盒子。