Question

在www.armstrongvisuals.com/tester.php（卷轴链接）上修剪测试页

youtube视频的fancybox2实现仅在Safari中显示Fancybox中心，并在页面中显示flexslider幻灯片。 Fancybox叠加窗口的大小和位置正确，但youtube内容垂直和水平位于fancybox叠加层的中间。 Safari似乎依赖于不正确的窗口宽度和高度。在调整窗口大小时，视频会与fancybox分开移动。我在页面中有一个Flexslider幻灯片，我知道Flexslider有溢出问题。在本地服务器上进行故障排除。更新Flexslider并没有解决问题。现在，我正在尝试优化fancybox.js以依赖内部高度和内部宽度，但是会喜欢一些帮助。希望这个问题对于了解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>

Answer 1

想出来。首先，我确定我在html youtube超链接中使用了embed和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 kwicks。我还使用缩略图辅助工具并缩放缩略图以适应初始窗口宽度。

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');
                        }
            }
        }
    });
});

张贴以防万一其他人陷入此裂缝。我的jQuery没有显示在我的原始帖子中，因为我在外部引用我的页面的部分链接和php包含。对于那个很抱歉。感谢JFK将很多注意力放在fancybox支持上。

Answer 2

附录：现在很清楚，我在我的fancybox组中将iframe与iframe混合，使用“fancybox-media”作为我页面中此fancybox实例的类导致了问题，打破了我的html代码中的iframe调用。以下更新的代码适用于flexslider，并且在safari中没有毛刺。（我正在从一个链接激活一个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 是其他代码指定的变量，用于缩放我的缩略图。

Safari Youtube不以Fancybox为中心

2 个答案: