Jquery fancybox工作但不识别css，即使所有内容都链接正确

我正在使用fancybox为一个大学网站建立一个图像库：

单击图像时，fancybox会初始化，但它似乎无法识别css或其他内容。没有边框、导航或任何东西，有时图像会以正确的大小打开，然后跳到屏幕顶部，变得更小。缩略图似乎也没有任何css附加到它们上。我已经检查了文档头部的所有内容是否正确链接，并且在浏览器中没有返回任何错误。我在这里不知所措

这是我的剧本：

<script type="text/javascript">
    $(document).ready(function() {
    $("a.fancybox").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   true
    }); 

    });
    </script>

$（文档）.ready（函数（）{
$（“a.fancybox”）。fancybox({
“transitionIn”：“弹性”，
“transitionOut”：“弹性”，
“speedIn”：600，
“加速输出”：200，
“叠加显示”：正确
}); 
});

这是我的HTML：

<div class="large-12 columns">
        <div id="gallery">

            <a class="fancybox" rel="group" href="img/gallery/gd/image1.jpg"><img src="img/gallery/gd/thumbs/image1.jpg" alt="Kathleen Watson - Canadian Female Offenders Infographic" /></a>

            <a class="fancybox" rel="group" href="img/gallery/gd/image2.jpg"><img src="img/gallery/gd/thumbs/image2.jpg" alt="" /></a>

            <a class="fancybox" rel="group" href="img/gallery/gd/image3.jpg"><img src="img/gallery/gd/thumbs/image3.jpg" alt="" /></a>

</div>

</div>

---

如有任何建议，将不胜感激。谢谢

尝试改用rel属性。这样你甚至可以通过导航浏览图片

HTML

请参阅工作JSFIDLE：

---

当我在浏览器中查看网络流量时，我看到以下内容（200=成功，404=未找到）：

大多数css和javascript文件的路径都是错误的。看看失败的请求，它们都有/NEW/2/NEW/2，这就是问题所在

您当前的链接：

<script src="NEW/2/fancybox/lib/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>

应该是

<script src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>

---

为什么浏览器会发出这些错误的请求？因为您使用的是相对URL。由于当前html页面位于

/NEW/2/

中，浏览器会将请求文件的url附加到当前位置。

我甚至将JSFIDLE中的确切代码复制并粘贴到我的页面中，图像也会执行同样的操作。您100%确定所有脚本都已加载吗？可能使用直接（互联网）链接？（请参阅jsfiddle->External resources中的其他内容）。可以肯定的是：）Firefox告诉我，在您提供的链接上，fancybox css文件是空的（或者找不到）。我使用firefox自己的inspector在该文件中添加了css，它工作正常。

<script src="NEW/2/fancybox/lib/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>

<script src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>