Question

我试图将Fancybox 2.1.5应用于网站，我只能将其部分工作。导航按钮和关闭按钮根本不会显示。这是包含网站图像的html页面的编码：

<head>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
</head>

<body>
    <div class="imgHolder"><a class="fancybox" rel="group" href="img/gallery/set1/look1_lg.jpg"><img id="look 1: top $79 / jacket $69 / pant $29" data-thumb="img/gallery/set1/look1_thumbnail.jpg" data-href="img/gallery/set1/look1.jpg" src="img/galleryPrototype3/semiPixel.png" alt="look 1" width="1060" height="800"></a></div>
    <div class="imgHolder"><a class="fancybox" rel="group" href="img/gallery/set1/look2_lg.jpg"><img id="look 2: top $79 / jacket $69 / pant $29" data-thumb="img/gallery/set1/look2_thumbnail.jpg" data-href="img/gallery/set1/look2.jpg" src="img/galleryPrototype3/semiPixel.png" alt="" width="578"  height="800"></a></div>
</body>

这是我想要使用的基本Fancybox jQuery脚本：

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

当Fancybox jQuery脚本插入HTML文档并点击look1.jpg时，会出现灰色的半透明叠加层，但没有图像。

当从HTML文档中完全删除Fancybox jQuery脚本并单击look1.jpg时，浏览器窗口将变为不透明的深灰色，并在中心显示look1_lg.jpg，但没有导航箭头或关闭按钮。

在我曾经尝试过的同一问题上有一些其他帖子，问题解决了我的问题。在这些帖子中，我仔细检查了以下内容，似乎所有内容都设置正确：Fancybox sprite和overlay png文件与Fancybox CSS文档位于同一文件夹中，Fancybox jQuery源代码和样式表已链接起来正确的，2个图像的锚标签都有＆＃34; rel = group＆＃34;适用于他们。

我想知道整个网站的编码方式是否与它有关？该站点还使用AJAX和bootstrap构建。上面引用的包含网站图像的HTML页面通过AJAX加载到网站索引页面中。作为测试，我将该页面的编码放在一个独立的HTML文件中，并且fancybox工作得很好，这让我觉得我的猜测是正确的。如果是这种情况，我不知道如何解决问题。作为参考，这是网站索引页面的代码：

<head>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/galleryPrototype3.css">
    <link rel="stylesheet" href="css/photoswipe.css">
    <link rel="stylesheet" href="css/style.css">

    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/device.js"></script> 
    <script type="text/javascript" src="js/bootstrap.js"></script>  
    <script type="text/javascript" src="js/core.js"></script>
    <script type="text/javascript" src="js/script.js"></script> 

</head>
<body>
<div id="webSiteLoader"></div>
<div id="glob-wrap">
    <!--menu: This is the main navigation. It's been simplified here to include only the piece of navigation that refers to the html page referenced above-->   
    <nav id="mainNav" data-follow="location" data-type="navigation">
        <ul>
            <li><a href="/people">people</a></li>
        </ul>
    </nav>
    <div class="_cover"></div>
    <!-- gallery holder: this holds the website's image gallery -->  
    <section id="galleryPrototype3"></section>
    <!-- content holder -->  
    <div id="content_pages" data-follow="location" data-type="switcher" data-flags="ajax"></div>
    <!-- category pages: This has been simplified to include only the line that refers to the html page referenced above --> 
    <div id="category_pages" data-follow="location" data-type="switcher">
        <div data-id="people" data-source="peopleCategory.html"></div>
    </div>
</div>

</body>
</html>

我还尝试将Fancybox jQuery脚本放在网站索引页面中，而不是放在包含网站图像的html页面中。在这种情况下，当我点击图像时，浏览器窗口将变为不透明的深灰色，中间显示look1_lg.jpg，但没有导航箭头或关闭按钮。

我不知所措，所以任何帮助都会受到赞赏！

Fancybox 2.1.5导航箭头和关闭按钮不显示

0 个答案: