的fancybox 2身高不工作

Question

我想從我的fancybox取決於其連接到客戶端點擊得到兩個不同的高度，但由於某些原因的高度只是不斷去100％。這不是要我想

這個高度是我的代碼

$('.fancyboxhd').fancybox({ 
    width: 1287, 
    height: 720 
}); 
$('.fancyboxsd').fancybox({ 
    width: 640, 
    height: 360, 
}); 

這是一個iFrame內容

Answer 1

（見下面編輯對改進的答案）

對於iframe中的內容，你的HTML應該像

<a class="fancyboxhd fancybox.iframe" href="hdfile.html">hd</a> 
<a class="fancyboxsd fancybox.iframe" href="sdfile.html">sd</a> 

那麼這兩個選項添加到您的腳本

fitToView : false, 
autoSize : false 

使你的腳本應該像

$(document).ready(function(){ 
$('.fancyboxhd').fancybox({ 
    width : 1287, 
    height : 720, 
    fitToView : false, 
    autoSize : false 
}); 
$('.fancyboxsd').fancybox({ 
    width: 640, 
    height: 360, 
    fitToView : false, 
    autoSize : false 
}); 
}); 

###編輯###：（2013年9月5日）

該代碼可以使用（HTML5）在錨data-*屬性和像兩個選項相同class改進和簡化爲：

HTML

<a class="fancybox fancybox.iframe" data-width="1287" data-height="720" href="hdfile.html">HD</a> 
<a class="fancybox fancybox.iframe" data-width="640" data-height="360" href="sdfile.html">SD</a> 

JS

$('.fancybox').fancybox({ 
    fitToView: false, 
    autoSize: false, 
    afterLoad: function() { 
     this.width = $(this.element).data("width"); 
     this.height = $(this.element).data("height"); 
    } 
}); 

見JSFIDDLE

注意：在此編輯，演示中使用的fancybox v2.1.5的時間。

Answer 2

爲v2.1.5，你可以使用HTML元素的ID使用。

<a id="item1" class="fancybox" href="http://fiddle.jshell.net/YtwCt/show/">Open 500x200</a> 

<br /> 

<a id="item2" class="fancybox" href="http://fiddle.jshell.net/YtwCt/show/">Open 200x500</a> 

<div id="test" style="display:none"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, nulla eu interdum posuere, nisi mauris cursus nisi, nec faucibus nibh urna nec turpis. 


$(".fancybox-wrap").draggable(); 
$(".fancybox") 
    .attr('rel', 'gallery') 
    .fancybox({ 
     type: 'iframe', 
     autoSize : false, 
     beforeLoad : function() {   
      if ($(this.element).attr('id') == 'item1') { 
       this.width = 500; 
       this.height = 200; 
      } 
     else { 
       this.width = 200; 
       this.height = 500; 
      } 
     } 
    });