FancyBox thay đổi kích thước chiều rộng

Question

Tôi có thể thay đổi kích thước chiều cao với phần $.fancybox.resize();, nhưng chiều rộng chỉ không cập nhật theo nội dung mới. Suy nghĩ?

Answer 1

Từ fancybox api docs:

$.fancybox.resize: "Auto-thay đổi kích thước Fancybox chiều cao để phù hợp với chiều cao của nội dung."

Vì vậy, có vẻ như nó không có ý định điều chỉnh chiều rộng.

Nếu bạn muốn điều chỉnh chiều rộng, bạn có thể làm điều đó bằng cách thay đổi kích thước các yếu tố #fancybox-wrap và #fancybox-inner theo cách thủ công. Sau khi một số kiểm tra rất nhanh, có vẻ như #fancybox-wrap được thiết lập để 20px rộng hơn #fancybox-inner:

$('#fancybox-inner').width(400); 
$('#fancybox-wrap').width(420); 

Bạn cũng có thể điều chỉnh độ rộng khi bạn lần đầu tiên đăng ký Fancybox sử dụng width tùy chọn:

$('#somelink').fancybox({ width: '100px' }); 

Answer 2

Trong phiên bản mới hơn phiên bản của Fancybox (1.3.4 trong trường hợp của tôi) sử dụng

$('#fancybox-content').width(600); 

thay vì

$('#fancybox-inner').width(400); 

cho tay điều chỉnh độ rộng

Answer 3

thực hiện một số thay đổi trong jquery.fancybox.js gần dòng abou nubmer: 837 thay đổi

current.width = loadingBay.width(); 

để

current.width = loadingBay.width() + 2*current.padding; 

nó làm việc tốt để tôi.

Answer 4

Đây là những gì làm việc cho tôi:

$('#fancybox-wrap, #fancybox-outer, #fancybox-content').css('width', 'auto'); 
$.fancybox.center(); 

Answer 5

Chỉ cần mở jquery.fancybox.js và thêm chiều rộng của riêng bạn. Đây là mã của tôi với chiều rộng = 72%.

// Reset dimensions so we could re-check actual size 
     wrap.add(skin).add(inner).width('72%').height('auto').removeClass('fancybox-tmp');