0

www.armstrongvisuals.com/tester.php のテスト ページを縮小 (リール リンク)

YouTube ビデオの fancybox2 実装は、Fancybox センターから Safari のみに表示され、ページに flexslider スライドショーが表示されます。Fancybox オーバーレイ ウィンドウのサイズと位置は正しく設定されていますが、YouTube コンテンツは、Fancybox オーバーレイの垂直方向と水平方向の半分にはみ出しています。Safari は、不適切なウィンドウの幅と高さに依存しているようです。ウィンドウのサイズを変更すると、ビデオはファンシーボックスとは別に移動します。ページに Flexslider スライドショーがあり、Flexslider にオーバーフローの問題があることがわかっています。ローカル サーバーでトラブルシューティングを行っています。Flexslider を更新しても問題は解決しませんでした。今、私は fancybox.js を改良して innerheight と innerwidth に依存するようにしようとしていますが、何か助けていただければ幸いです。この問題が、Fancybox を知っている人にとってなじみのあるものであることを願っています。リンクは、chrome、firefox、ie7、ie8、ie9 で正常にテストされます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>tester</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!--/*css reset*/-->
    <link rel="stylesheet" type="text/css" href="./css/reset.css"/>
<!--/*fancybox*/-->
    <script type="text/javascript" src="./js/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="./js/jquery.fancybox.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/jquery.fancybox.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="./css/jquery.fancybox-buttons.css"/>
        <link rel="stylesheet" type="text/css" href="./css/jquery.fancybox-thumbs.css"/>
        <script type="text/javascript" src="./js/jquery.fancybox-thumbs.js"></script>
        <script type="text/javascript" src="./js/jquery.fancybox-media.js"></script>
        <script type="text/javascript" src="./js/jquery.fancyboxGO.js"></script>
<!--/*stylesheets*/-->
    <link rel="stylesheet" type="text/css" href="./css/fonts.css"/>
        <!--[if!IE]><!-->
    <link rel="stylesheet" type="text/css" href="./css/avstyle.css"/>
    <link rel="stylesheet" type="text/css" href="./css/flexslider.css" />
    <!--<![endif]-->
<!--/*javascripts*/-->
    <script type="text/javascript" src="./js/flexslider.js"></script>
    <script type="text/javascript" src="./js/flexsliderGO.js"></script>
</head>
<body>
    <div class="hider">
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-necktest-Bbw.jpg" href="http://www.youtube.com/v/iHrx9wU2t-U" title="test title"></a>
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-necktest-Bmix.jpg" href="http://www.youtube.com/v/aE6t1jERznw" title="test title"></a>
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-broquard.jpg" href="http://www.youtube.com/v/MgQngKUuFS4" title="test title"></a>
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-cleg.jpg" href="http://www.youtube.com/v/A6DyzGStzLE" title="test title"></a>
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-cactoons.jpg" href="http://www.youtube.com/v/BPJBRMEnbGM" title="test title"></a>
    </div>

<a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-reel.jpg" href="http://www.youtube.com/v/oDVTf4g5cj8" title="test title">reel</a>

    <div class="hider">
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-speechtest.jpg" href="http://www.youtube.com/v/5JagAzTMGL0" title="test title"></a>
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-necktest.jpg" href="http://www.youtube.com/v/U-jkKFOdN_Y" title="test title"></a>
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-mugger.jpg" href="http://www.youtube.com/v/cTbe0m3_ZYc" title="test title"></a>
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-necktest-B.jpg" href="http://www.youtube.com/v/49ZMoplNEoM" title="test title"></a>
    <a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-necktest-Bcolor.jpg" href="http://www.youtube.com/v/mTQgA-uItHU" title="test title"></a>
    </div>
<br /><br />

<!--/*slideshow*/-->
<div id="sshow">
    <?php include('includes/slideshow.php'); ?>
</div>
<!--/*end slideshow*/-->


</body>
</html>
4

2 に答える 2

0

理解した。まず、html youtube ハイパーリンクで埋め込みと iframe を使用していることを確認しました

<div class="hider">
<a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-cactoons.jpg" href="http://www.youtube.com/embed/BPJBRMEnbGM?autoplay=1" title="test title"></a>
</div>

<a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-reel.jpg" href="http://www.youtube.com/embed/oDVTf4g5cj8?autoplay=1" title="test title">reel</a>

<div class="hider">
<a class="fancybox-media" rel="myvids" data-thumbnail="/images/thmb-necktest-Bcolor.jpg" href="http://www.youtube.com/embed/mTQgA-uItHU?autoplay=1" title="test title"></a>
</div

次に、「type」:「iframe」を js jQuery 呼び出しに追加し、メディア ヘルパーを削除しました。$の代わりにjQueryを使用しているのは、サイトにいくつかの mootools kwick があるためです。また、サムネイル ヘルパーを使用して、サムネイルを拡大縮小して、最初のウィンドウの幅に合わせます。

jQuery(document).ready(function() {
    jQuery('.fancybox-media').fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        prevEffect  : 'none',
        nextEffect  : 'none',
        nextClick   : false,
        "type"      : "iframe",
        helpers     : {
            title : {
                type: 'inside'
            },
            thumbs : {
                width : (window.innerWidth*.09),
                height : (window.innerWidth*.050943396),
                        source  : function(current) {
                            return jQuery(current.element).data('thumbnail');
                        }
            }
        }
    });
});

他の誰かがこの亀裂に陥った場合に備えて投稿してください。リンクと php インクルードでページのセクションを外部参照しているため、私の jQuery は元の投稿に表示されませんでした。申し訳ありません。ファンシーボックスのサポートに多くの注意を払っている JFK に感謝します。

于 2013-01-22T21:35:06.460 に答える
0

補遺: ファンシーボックス グループで iframe とインラインを混在させていることは明らかです。ページ内のファンシーボックスのこのインスタンスのクラスとして「fancybox-media」を使用すると問題が発生し、HTML コードで iframe 呼び出しが壊れていました。次の更新されたコードは、flexslider で動作し、サファリで不具合が発生することはありませんでした。(他のリンクを非表示にして、1 つのリンクから fancybox グループをアクティブにしています):

<div class="hider">
<a class="fancybox" rel="myvidsB" data-thumbnail="/images/thmb-maxscripts.jpg" href="#maxscripter"></a>
</div>
<a class="fancybox fancybox.iframe" rel="myvidsB" data-thumbnail="/images/thmb-reel.jpg" href="http://www.youtube.com/embed/oDVTf4g5cj8?autoplay=1" title="title caption">reelB</a>
<div class="hider">
<a class="fancybox fancybox.iframe" rel="myvidsB" data-thumbnail="images/thmb-cactoons.jpg" href="http://www.youtube.com/embed/BPJBRMEnbGM?autoplay=1" title="title caption"></a>
</div>

jQueryで

jQuery(document).ready(function() {
    jQuery('.fancybox').fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        prevEffect  : 'none',
        nextEffect  : 'none',
        nextClick   : false,
        arrows  :  true,
        margin  :  [20, 60, 20, 60],
        helpers     : {
            title : {
                type: 'inside'
            },
            thumbs : {
                width : thmbWa,
                height : thmbHa,
                        source  : function(current) {
                            return jQuery(current.element).data('thumbnail');
                        }               
            }
        }
    });
});

ここで、thmbWaとthmbHaは、サムネイルをスケーリングするために他のコードによって指定された変数です。

于 2013-01-23T02:52:42.890 に答える