0

在 www.armstrongvisuals.com/tester.php 上精简了测试页面（卷轴链接）

我的 youtube 视频的 fancybox2 实现仅在 Safari 中显示 Fancybox 中心，页面中有一个 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 超链接中使用了 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 的支持。

于 2013-01-22T21:35:06.460 回答
0

附录：现在很明显，我在我的 fancybox 组中将内联与 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是由其他代码指定的变量，用于缩放我的缩略图。

于 2013-01-23T02:52:42.890 回答