Safari瀏覽YouTube上的fancybox

不集中在www.armstrongvisuals.com/tester.php（卷軸鏈接）下調測試頁Safari瀏覽YouTube上的fancybox

我fancybox2實施YouTube視頻顯示關閉僅在Safari中的fancybox中心，具有flexslider幻燈片在頁面中。 Fancybox疊加窗口的大小和位置正確，但youtube內容在fancybox的一半以外垂直和水平疊加。 Safari似乎依靠不正確的窗口寬度和高度。調整窗口大小時，視頻從fancybox分開移動。我在頁面上有一個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>

來源

2013-01-22 christiana

哪裏是你的jQuery代碼？ – JFK

我解決了這個問題。我是新成員，所以在發佈固定代碼之前我必須等上幾個小時。我需要將我的html切換到iframe嵌入標籤，並從我的jQuery js中刪除媒體助手。我非常感謝你的許多答案，JFK和fancybox正在大大改善這個網站。謝謝。 – christiana

附錄：現在很明顯，我在我的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-23 02:52:42 christiana

想通了。首先，我取得了一定的我是用嵌入和iframe在HTML的YouTube鏈接

<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

加入「類型」：「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-22 21:35:06 christiana

Safari瀏覽YouTube上的fancybox

回答

相關問題