0

所以这个 FancyBox 的事情真的让我很沮丧。我一直试图让它工作一段时间，但什么也没发生。当我点击我的链接时，我看到的只是浏览器中正常显示的 html 文件，但没有弹出窗口或任何内容。

有一个错误说：

Uncaught TypeError: Object#<Object> has no method 'fancybox'

所以为了解决这个问题，我让我的链接有一个 ID 而不是一个类。现在，没有错误，但没有任何反应！我什至不知道在哪里可以解决这个问题。我将在下面发布我的代码，因此如果有人能弄清楚我做错了什么，将不胜感激。

谢谢！

索引.html 

    <!-- ******************* CSS ******************* -->

    <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
    <!-- ******************* Javascript ******************* -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./jquery.fancybox.pack-1.3.4.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("a.iframe").fancybox({
                'type' : 'iframe'
                'frameWidth':500,
                'frameHeight':500,
            });
        });
    </script>
</head>
<body>
    <a id="iframe" href="./iFrameFancy.html">Test FancyBox Here!</a>
</body>
</html>

应该在 FancyBox 中加载的 HTML 页面 

    <!-- ******************* CSS ******************* -->

    <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
    <!-- ******************* Javascript ******************* -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./jquery.fancybox.pack-1.3.4.js"></script>
</head>
<body>
    <h1>FancyBox Test!</h1>
    <p>
        This is a test of the FancyBox API. I have no idea if anything is going to work.
    </p>
</body>
</html>
4

2 回答 2

0

您是否包含 jQuery 两次？我认为您在 iframe 中加载的 HTML 页面上不需要它。尝试删除它。

于 2012-10-12T16:39:09.867 回答
0

它可能不起作用，因为您在这里有一些语法错误和无效选项：

<script type="text/javascript">
    $(document).ready(function() {
        $("a.iframe").fancybox({
            'type' : 'iframe'
            'frameWidth':500,
            'frameHeight':500,
        });
    });
</script>

...所以试试这个：

<script type="text/javascript">
    $(document).ready(function() {
        $("a.iframe").fancybox({
            'type' : 'iframe',  //<--missing comma here
            'width':500,
            'height':500  //<-- removed last comma here
        });
    });
</script>

frameWidth并且frameHeight适用于 1.2.x 版本，但您使用的是 v1.3.4。

另请注意，在上面的脚本中，您将 fancybox 绑定到 selector .iframe，这意味着带有class="iframe"但您的 html 的锚点如下：

<a id="iframe" href="./iFrameFancy.html">Test FancyBox Here!</a>

（没有class，但ID在那里）......什么时候应该

<a class="iframe" href="./iFrameFancy.html">Test FancyBox Here!</a>

此外，请确保 Fancybox 文件正确加载（检查您的路径），因为您正在从此处加载 css 文件

/fancybox/jquery.fancybox.css

而这里的 js 文件

./jquery.fancybox.pack-1.3.4.js

...我想知道这两个文件是否在同一个目录中或者你移动了它们，否则只需确保fancybox图像文件与css文件位于同一目录下。

于 2012-10-12T17:26:49.580 回答