0

我在这里为一个大学网站使用 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>

任何建议将不胜感激。谢谢！

4

2 回答 2

0

尝试改用 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/

于 2013-08-30T23:40:37.107 回答
0

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

于 2013-08-31T11:42:53.590 回答