Question

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

有一个错误说：

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

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

谢谢！

的index.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>

Answer 1

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

Answer 2

它可能无法正常工作，因为您在此处有一些语法错误和无效选项：

<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绑定到选择器.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文件位于同一目录下。

FancyBox不显示html页面

2 个答案: