如何在FancyBox中顯示含有以下內容的iframe？

現在我寫了一個用於在FancyBox窗口中加載iframe的標準代碼。所以我指定了類型iframe和href與youtube params的鏈接。如何在FancyBox中顯示含有以下內容的iframe？

$.fancybox({ 
      'type' : 'iframe', 
      'maxWidth': "90%", 
      'href' : href.replace(new RegExp('watch\\?v=', 'i'), 'embed/') + '?theme=dark&color=white&autohide=1&rel=0&iv_load_policy=3&modestbranding=1&enablejsapi=1&showinfo=0&autoplay=1', 
      'padding' : 0, 
      'margin' : 0, 
      'autoCenter': false, 
      'scrolling' : 'no', 
      'fitToView' : false, 
      'width' : 950, 
      'overlayShow': true, 

      beforeLoad : function() { 
       var template; 
       var hash; 
       var info; 
       getVideo(id); 
      }, 

      afterLoad:function(){ 
       $('.fancybox-inner').append(template); 
       changeURL(matchYoutubeUrl(href)+'#'+id, info.VideoName, info); 
      }, 

      helpers: { 
       overlay: { 
        locked: false 
       } 
      } 
     });

我需要證明IFRAME的YouTube和之後表現出任何HTML代碼。怎麼做？我試着方法：

afterLoad:function(){ 
    // $('.fancy-content').html('<b>Any....</b>'); 
}

但這種情況下清除我的iframe ...

也試過：

afterLoad:function(){ 
    $('.fancybox-inner').append(template); 
}

它的作品，但我沒有看到的內容，其隱藏的，塊.fancybox-inner有高= 600px，但內容超過600px，所以我沒有看到...

來源

2014-10-31 AllenDegrud

嘗試參考resh你的fancybox（你的iframe需要被放置在「fancybox-inner」和顯示塊中以使其工作）一旦iframe被加載（如果iframe具有靜態高度，則不需要等待其加載）。

afterLoad:function(){ 
    $('.fancybox-inner').append(template); 

    //resize fancybox 
    $.fancybox.update(); 
}

另一個解決方法是，到iframe加載到您的.fancybox-inner在beforeLoad -event功能。那樣，fancybox應該確定內容的大小。

來源

2014-10-31 11:11:39 lin

第一個解決方案不起作用，你能解釋第二個嗎？加載iframe後，'.fancybox-inner'的高度仍然是600px。我使用版本：2.1.4。也試過：'$ .fancybox.update（）' – AllenDegrud 2014-10-31 11:41:00

我現在試過了：'$ .fancybox.resize（）; $ .fancybox.update（）;'它可以工作，但窗口處於完整模式。怎麼修？ – AllenDegrud 2014-10-31 11:50:13

@AllenDegrud，請開一個新的問題，因爲這個問題已經解決，你的問題是一個新問題。請給我答案的「勾號」 - >表示正確的答案。乾杯，林 – lin 2014-10-31 15:20:56

你可以使用的fancybox title添加任何你想要的HTML內容，你只需要設置一個變量內部的HTML內容，如：

var template = 
    '<div id="VideoModalDisplay">' + 
    '<p>whatever html content you want to set here</p>' + 
    '</div>';

...或內部（隱藏）HTML <div>像：

<div id="template" style="display: none;"> 
    <div id="VideoModalDisplay"> 
     <p>Lorem Ipsum</p> 
     <p>whatever html content you want to set here</p> 
     <p>...etc...</p> 
    </div> 
</div>

...和拉像

的 beforeLoad回調裏面的內容（使用第二個選項）

現在，根據您的jsfiddle，如果你想從這個網站

<div class="play" id="4" data-width="850" data-height="470" data="https://www.youtube.com/embed/8UVNT4wvIGY"></div>

打電話的fancybox ......你可能需要調整它像

<div class="play" id="4" data-fancybox-href="https://www.youtube.com/embed/8UVNT4wvIGY" data-width="850" data-height="470" ></div>

通知我將data="{youtube URL}"更改爲data-fancybox-href="{youtube URL}"，fancybox將知道從哪裏獲取內容。

還要注意的是，如果URL具有以下格式

https://www.youtube.com/embed/8UVNT4wvIGY

...你實際上並不需要的replace()方法將其轉換。

後，得到beforeLoad回調像內從data屬性不同的值（width，height等）：

beforeLoad: function() { 
    var info = '?theme=dark&color=white&autohide=1&rel=0&iv_load_policy=3&modestbranding=1&enablejsapi=1&origin=http://whoismed.com&showinfo=0&autoplay=1'; 
    // getVideo(id); 
    var template = jQuery("#template").html(); 
    this.href = this.href + info; 
    this.title = this.title ? this.title + template : template; 
    this.width = $(this.element).data("width"); 
    this.height = $(this.element).data("height"); 
}

注意this.href，this.title，this.width和this.height指默認的fancybox的值可以在回調中重寫。

還要注意，this.href從特殊data-fancybox-href屬性獲取其值（在HTML），但我們要重寫它以添加VARinfo與YouTube尾隨參數。

查看完整的代碼JSFIDDLE

無需出汗試圖添加內容後調整其大小的fancybox。

來源

2014-10-31 19:39:21 JFK

如何在FancyBox中顯示含有以下內容的iframe？

回答

相關問題