0

「fancybox」を使用して、YouTube ビデオを HTML5 でポップオーバーとして再生するように取り組んでいます。私だけがポップアップすることができません！代わりに、常にページ自体が開いているように見えますが、これは完全にポイントに反しています。これを修正する方法についてアドバイスをいただけないでしょうか。stack-overflow を調べましたが、このユース ケースに対する明確な答えが見つかりませんでした。

 <!DOCTYPE HTML>
<html>
    <head>
        <!--fancy box-->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
        <!-- /fancy box-->
        <!--fancy box-->
        <script type="text/javascript" src="fancybox/jquery.fancybox.pack.js"></script>
        <link rel="stylesheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen" />
        <script>
            $(document).ready(function() {

            /* This is basic - uses default settings */
            $("a#single_image").fancybox();
            /* Using custom settings */
            $("a#inline").fancybox({
                'hideOnContentClick': true
            });
            /* Apply fancybox to multiple items */
            $("a.group").fancybox({
                'transitionIn'  :   'elastic',
                'transitionOut' :   'elastic',
                'speedIn'       :   600, 
                'speedOut'      :   200, 
                'overlayShow'   :   false
            });

        });
        </script>
        <!-- /fancy box-->

    </head>
    <body>



                            <a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo&autoplay=1">Youtube</a><br>
                            <a class="iframe" href="http://www.youtube.com/watch?v=opj24KnzrWo&autoplay=1">This goes to iframe</a><br >
                            <a class="iframe" href="http://www.example.com">This goes to iframe</a><br>
                            <a class="various iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>

    </body>
</html>
4

3 に答える 3

0

わかりました、これを試してください: script と css へのリンクが正しいことを確認してください。私の場合、サブフォルダーは js と css です。

最初のリンクには YouTube ビデオが含まれており、2 番目のリンクには画像が含まれています。

<!DOCTYPE HTML>
<html>
<head>
    <!--fancy box-->
    <script type="text/javascript" src="js/jquery-1.9.0.js"></script>
    <!-- /fancy box-->
    <!--fancy box-->
    <script type="text/javascript" src="js/jquery.fancybox.js"></script>
    <link rel="stylesheet" href="css/jquery.fancybox.css" type="text/css" media="screen" />
    <script>
        $(document).ready(function() {

        $(".various").fancybox({
            maxWidth    : 800,
            maxHeight   : 600,
            fitToView   : false,
            width       : '70%',
            height      : '70%',
            autoSize    : false,
            closeClick  : false,
            openEffect  : 'none',
            closeEffect : 'none'
        });

    });
    </script>
    <!-- /fancy box-->

</head>
<body>

    <ul class="list">

        <li>
            <a class=" various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">youtube</a>
        </li>
        <li>
            <a class="various" href="http://androidactivist.org/wp-content/uploads/2012/03/draw-something-koopa.jpg" title="Lorem ipsum dolor sit amet"><img src="http://androidactivist.org/wp-content/uploads/2012/03/draw-something-koopa.jpg" alt="" /></a>
         </li>
    </ul>

于 2013-03-26T13:02:37.060 に答える
0

存在しない JavaScript から要素を選択しています。アンカー タグの ID クラスを確認してください。、fancybox は初期化に失敗します。同じことがa#inlineとa.groupにも当てはまります(アンカーに class='group' が必要です) 。

于 2013-03-26T10:54:05.077 に答える
0

ファンシーボックスがiframeに使用するのと同じクラスを使用する必要があります：「fancybox.iframe」

また、埋め込まれた youtube リンクを使用すると、すべてが正常に機能します。

<a class="various fancybox.iframe" href="http://www.youtube.com/embed/usiOu1ZKJ4o">Youtube (iframe)</a>

.

            $(".various").fancybox({
                maxWidth    : 800,
                maxHeight   : 600,
                fitToView   : false,
                width       : '70%',
                height      : '70%',
                autoSize    : false,
                closeClick  : false,
                openEffect  : 'none',
                closeEffect : 'none'
            });

最新の jquery ライブラリを使用してください。最新のものは 1.4 を使用している 1.9 です。

また、fancybox.pack.js の代わりに fancybox.js を使用します。それはトリックを行う必要があります!! また、 fancybox.iframe を別のクラスを組み合わせたクラスとして使用して、 fancybox 関数をトリガーします

于 2013-03-26T11:01:36.380 に答える