Fancybox 2 Height không hoạt động

Question

Tôi đang cố gắng để có được hai độ cao khác nhau từ hộp ưa thích của tôi tùy thuộc vào liên kết mà khách hàng nhấp vào, nhưng vì lý do nào đó chiều cao chỉ tiếp tục đi tới 100%. Nó sẽ không để chiều cao Tôi muốn

Đây là mã của tôi

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

Đây là một nội dung iFrame

Answer 1

(thấy chỉnh sửa dưới đây để biết câu trả lời cải thiện)

Đối với nội dung iframe, html của bạn phải trông giống như

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

sau đó thêm hai tùy chọn này để kịch bản của bạn

fitToView : false, 
autoSize : false 

nên kịch bản của bạn sẽ trông như thế

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

### EDIT ###: (ngày 05 tháng 9 2013)

Mã có thể được cải thiện và đơn giản hóa bằng cách sử dụng (HTML5) data-* thuộc tính trong các neo và cùng một class cho cả hai tùy chọn như:

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"); 
    } 
}); 

Xem JSFIDDLE

LƯU Ý: Tại thời điểm chỉnh sửa này, bản demo sử dụng Fancybox v2.1.5.

Answer 2

cho v2.1.5 bạn có thể sử dụng điều này bằng cách sử dụng id của phần tử html.

<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; 
      } 
     } 
    });