jQuery và Colorbox: Cách tự động đặt chiều cao và chiều rộng của hộp màu khung nội tuyến

Question

Tôi đã tải xuống phiên bản mới nhất của colorbox jquery plugin. bây giờ tôi đặt đúng colorbox cho iframe và inline. hộp màu vấn đề của tôi (lightbox) không được thiết lập tự động chiều cao/chiều rộng hình thức bên ngoài trang. làm thế nào để sửa lỗi này? Có cách nào cho việc này?

MY chức năng hộp thuốc vẽ:

<script> 
$(document).ready(function(){ 
$(".iframe").colorbox({inline:true,iframe:true}); 
</script> 

Cảm ơn

Answer 1

Bởi vì hộp thuốc vẽ sẽ không biết những gì bên trong khung nội tuyến, tự động thay đổi kích thước không thể làm việc theo cách bạn mong đợi.

tôi làm điều đó như thế: thiết lập chiều rộng mặc định + chiều cao khi mở hộp thuốc vẽ với các tùy chọn này:

{ iframe: true, innerWidth: 430, innerHeight: 370, scrolling: false, ... } 

Chọn kích thước, mà làm cho ý nghĩa nhất cho nội dung của bạn: hộp thuốc vẽ sẽ mở ra và tải các iframe vào hộp này. Vào cuối nội dung html của iframe, đặt kịch bản này ít, mà thay đổi kích thước hộp thuốc vẽ từ bên trong iframe:

$(function(){ 
    parent.$.colorbox.resize({ 
     innerWidth:$('body').width(), 
     innerHeight:$('body').height() 
    }); 
}); 

Đối với kịch bản thứ hai để làm việc, jQuery phải được nạp bên trong iframe. Nếu không, bạn phải sử dụng JavaScript gốc để thực hiện tác vụ này.

Và đảm bảo rằng tất cả hình ảnh bên trong khung nội tuyến đó có bộ chiều rộng/chiều cao hoặc đã được tải đầy đủ. Nếu không innerWidth/innerHeight sẽ cung cấp các giá trị không chính xác.