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

Question

我正在使用fancybox为大学网站建立一个图片库：http://pacificdesignacademy.com/NEW/2/gallerygd.php

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

这是我的剧本：

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

    });
    </script>

这是我的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>

我们非常感谢任何建议。谢谢！

Answer 1

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

HTML

<a rel="example_group" title="Custom title" href="/linktopicture">
    <img alt="" src="/linktopicture">
</a>
...

CSS：

$("a[rel=example_group]").fancybox( {
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   true   
});

参见工作jsfiddle：

  

http://jsfiddle.net/wm8QD/14/

Answer 2

当我在浏览器中观看网络流量时，我看到了这一点（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附加到当前位置。