【问题标题】：Why won't FancyBox work?为什么 FancyBox 不工作？
【发布时间】：2013-06-01 22:27:47
【问题描述】：

我有一个客户正在为其制作电子商务网站，我正在尝试使用 FancyBox 来改进设计。我已经在这工作了将近三天，我这辈子都无法让它发挥作用。我已经阅读/观看了教程，复制和粘贴了代码，做了我能想到的一切来让它运行。这不是我在这里一次又一次地看到一个图像正确显示或未正确链接的问题。什么都没有发生。当最初的服务器意外重置其权限时，我什至切换了登台服务器。当链接用双引号括起来时，服务器也退回到无法读取链接，所以在切换到单引号后，我知道它们正在连接。所有图像、CSS、Javascript、jQuery 和插件现在都已正确链接。现在的问题是 FancyBox 是否被调用，和/或 Javascript 是否正确处理问题。 Firebug 没有显示错误。我尝试了不同的文档类型，没有区别。我错过了什么？请帮忙。这是我现在的 HTML 页面的代码。我只是想让它工作，因此是示例图片和视频。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ayana Brown Wigs - Home</title>

    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <!--[if lte IE 7]>
        <link rel="stylesheet" type="text/css" href="css/ie.css" />
    <![endif]-->

<script type=”text/javascript” src='http://code.jquery.com/jquery-latest.min.js'></script>
<script type="text/javascript" src='js/crossbrowsermenu.js'></script>
<link rel=”stylesheet” href='js/fancybox/source/jquery.fancybox.css' type=”text/css” media=”screen” />
<script type=”text/javascript” src='js/fancybox/source/jquery.fancybox.pack.js'></script>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />

</head>

<body>
<div id="pageWrapper">
    <div id="header">
    <h1>
        <a class="header-logo" href='http://www.daniel-schuster/ayana/index.html'>Ayana Brown Wigs, Bloomington, Indiana</a>
    </h1>
    </div>

<!-- IMAGE AND VIDEO TEST ----------------->

<div class="content">
    <div class="samples">
    <ul>
        <li><a class="fancybox" rel="samples" title="Caption Test" href="images/sample.jpg"><img src="images/samplesmall.jpg" alt="" /></a></li>

        <li><a class="fancybox" rel="samples" title="Caption Test 2" href="images/sample2.jpg"><img src="images/sample2small.jpg" alt="" /></a></li>

        <li><a class="fancybox" rel="samples" title="Caption Test 3" href="images/sample3.jpg"><img src="images/sample3small.jpg" alt="" /></a></li>
    </ul>
</div><br />

<div id="video">
    <a class="fancybox fancybox.iframe" title='Drop City Yacht Club - "Crickets"' href='http://www.youtube.com/embed/F95RD4wGpdc'><img src='images/drop-city-yacht-club.jpg' alt="drop city" /></a>
</div>

</div> <!-- End of Content -->

</div> <!-- End of contentWrapper -->

</div> <!-- End of pageWrapper -->

<script type=”text/javascript”>
    $(document).ready(function() {
        $(“.fancybox”).fancybox({
            width : ’70%’,
            height : ’70%’
        });
    $(“a[href$='.jpg'],a[href$='.png'],a[href$='.gif']“).fancybox();
    });
</script>

</body>
</html>

【问题讨论】：

说真的。停止使用 Word 文档编辑器来编辑您的代码。魔术语录正在慢慢杀死你。

标签： jquery html jquery-plugins fancybox fancybox-2

【解决方案1】：

可怕的大引号是你的问题。您的引号如下所示：

”

JavaScript 不理解这些。将它们更改为直引号：

"

你的撇号也有同样的问题。

【讨论】：

并且不需要调用两次fancybox。我想说，删除这一行：$(“a[href$='.jpg'],a[href$='.png'],a[href$='.gif']“).fancybox();，因为$(“.fancybox”).fancybox({ etc 部分会处理它。
我没有意识到 Notepad++ 添加了花括号。我回到普通的记事本，换掉了弯引号，果然，做到了。这是我背上的负担！非常感谢你们的帮助，伙计们！

【解决方案2】：

我认为您一定是在正确的脚本程序（如 dashcode 等）中编辑了此代码，因为存在一些语法错误。..

这里试试这个...

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox({
        width : '70%',
        height : '70%'
    });
$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").fancybox();
});
</script>

【讨论】：