呼叫的fancybox（）點擊功能，同時保持了庫功能

我需要加載的內容具有的fancybox iframe中動態的寬度。要實現調整iframe以適應內容的大小，我需要將內容寬度傳遞給Fancybox調用。我一直在使用這樣做如下：呼叫的fancybox（）點擊功能，同時保持了庫功能

jQuery('#container').on('click', '.fancybox-iframe', function(e){ 
    e.preventDefault(); 

    var iframeWidth = parseInt(jQuery(this).attr('id')); 

    jQuery(this).fancybox({ 
     width   : iframeWidth, 
     height   : '100%', 
     autoSize  : true, 
     fixed   : true, 
     type   : 'iframe', 
     loop   : false, 
     padding   : 0, 
     closeBtn  : false, 
     afterLoad  : function() { 
          jQuery('body').css('overflow', 'hidden'); 
     }, 
     afterClose  : function() { 
          jQuery('body').css('overflow', 'auto'); 
     }, 
     helpers   : {title: {type: 'outside'}, overlay: {opacity: 0.8, css: {'background-color': '#FFFFFF'}}, thumbs: {width: 50, height: 50}, buttons: {}} 
    }); 
});

以上部分的HTML：

<a id="<?php echo $content_width; ?>" class="fancybox-iframe fancybox.iframe" rel="gallery" href="<?php the_permalink(); ?>"></a> 
<a id="<?php echo $content_width; ?>" class="fancybox-iframe fancybox.iframe" rel="gallery" href="<?php the_permalink(); ?>"></a> 
<a id="<?php echo $content_width; ?>" class="fancybox-iframe fancybox.iframe" rel="gallery" href="<?php the_permalink(); ?>"></a>

上面的代碼有兩個問題：首先，我必須單擊超級鏈接兩次，爲的fancybox每次出現。第二個問題是，這並不與HREF的rel屬性的工作，因此不顯示爲一個的fancybox的畫廊內容。爲了克服畫廊問題，我換成jQuery(this).fancybox({與jQuery('.fancybox-iframe').fancybox({。這使畫廊功能的工作。然而，現在的fancybox只需要iframeWidth變量的點擊第一個鏈接的價值。

如何將內容寬度變量傳遞給的fancybox，並保持庫功能的任何想法？順便說一句，我用的fancybox工作2.0.5

來源

2012-02-29 John

請參閱我的更新 – JFK 2012-03-01 01:55:51

V2.X，你不需要使用jQuery .on()方法，因爲已經的fancybox使用「現場」所以

$(".fancybox-iframe").bind('click', function(){ 
    var iframeWidth = parseInt(jQuery(this).attr('id')); 
    }).fancybox({ 
    //options 
    width : iframeWidth, 
    });

應該做的伎倆。

UPDATE：

我已經修改了我上面的代碼和實際的東西都可以簡單得多超過預期。

下面的代碼可以讓你通過ID和有I幀（只需一次點擊）的畫廊動態傳遞width參數。只需添加到afterLoad回調此：

jQuery(".fancybox-iframe").fancybox({ 
//other API options here 
afterLoad: function(){ 
    var iframeWidth = parseInt(jQuery(".fancybox-iframe").eq(this.index).attr('id')); 
    this.width = iframeWidth 
} 
});// fancybox

請注意，您並不需要設置的選項width。

OPTION 2

另外，您還可以通過動態使用data-width屬性（如果使用的是HTML5 DOCTYPE）的width參數代替ID（和使用ID它所事項）。我認爲這將是一個更優雅的解決方案。

那麼你的HTML應該像

<a data-width="<?php echo $content_width; ?>" id="myID" class="fancybox-iframe fancybox.iframe" rel="gallery" href="<?php the_permalink(); ?>"></a>

和JavaScript是大同小異的

jQuery(".fancybox-iframe").fancybox({ 
//options 
afterLoad: function(){ 
    var iframeWidth = jQuery(".fancybox-iframe").eq(this.index).data("width"); 
    this.width = iframeWidth 
} 
});// fancybox

我已經設定了兩個選項的DEMO，你可以see here

末注意：Fancybox使用15px的padding，所以總數width將爲iframeWidth + 30，除非您設置選項爲0的選項。

來源

2012-02-29 21:46:57 JFK

這不起作用。點擊鏈接將瀏覽器鏈接到鏈接頁面，而不是在Fancybox中打開它。試着用event.preventDefault（）;以及。 – John 2012-02-29 22:05:02

即使沒有'.preventDefault（）'也能工作。檢查你是否沒有任何其他的js錯誤來破壞代碼。我將在此期間進行演示。另外我只注意到'width：iframeWidth'將不起作用，...您可能需要使用'afterLoad：function（）{this.width = iframeWidth}'''afterLoad'回調來傳遞值。我也會在演示中包含它。更快。 – JFK 2012-02-29 22:55:56

你已經釘了它。我有一個工作代碼使用你的第一個選項。我會研究你使用HTML5文檔類型和通過數據傳遞寬度的建議。 Thx很多幫助。 – John 2012-03-01 10:10:26

這是我用顏色框（另一個燈箱），並且可以給你看看你變成什麼需要做：如果您使用的fancybox

... 
onComplete: function() { 
    var container = $('.cboxIframe').contents().find(".innerElementWithWidthAndHeight"); 
    $.fn.colorbox.myResize(container.width() + 20, container.height() + 20); 
}

來源

2012-02-29 19:47:38 Relic

Thx的答覆。我沒有看到在Fancybox網站上指定調整寬度的任何方法。我不確定這是否適用於Fancybox 2.0.5。它在早期版本中可用。 – John 2012-02-29 20:00:27

呼叫的fancybox（）點擊功能，同時保持了庫功能

回答

相關問題