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 を 2 回含めていますか? 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バージョン1.2.x用frameHeightですが、v1.3.4を使用しています。

また、上記のスクリプトでは、 fancybox を selector にバインドしていることにも注意してください。つまり、HTML.iframeのアンカーは次のようになります。class="iframe"

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

(ないclassけどIDそこにある)... あるべき時

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

さらに、ここから css ファイルをロードしているため、Fancybox ファイルが正しくロードされていることを確認してください (パスを確認してください)。

/fancybox/jquery.fancybox.css

jsファイルはここから

./jquery.fancybox.pack-1.3.4.js

...両方のファイルが同じディレクトリにあるのか、それとも移動したのでしょうか。それ以外の場合は、fancybox の画像ファイルが css ファイルと同じディレクトリにあることを確認してください。

于 2012-10-12T17:26:49.580 に答える