Как я могу динамически изменить размер плагина jQuery Colorbox?

Question

Содержимое AJAX, загружаемое в Colorbox, содержит JavaScript, который изменяет размеры содержимого. Colorbox определяет свой размер на основе размеров до того, как произойдет весь AJAX. Как изменить размер Colorbox после загрузки содержимого?

Вот ссылка, где кто-то сказал, что вы можете снова вызвать colorbox () после его загрузки, но я не могу понять, как это сделать:

http://groups.google.com/group/colorbox/browse_thread/thread/535d21c69e9006b0

Answer 1

Чтобы динамически изменить размер colorbox, вы хотите сказать.

colorbox.resize({width:"300px" , height:"300px"})

Если вы хотите изменить размер цветовой рамки, в которую загружается Iframe, вы бы добавили что-то подобное в заголовок целевого документа.

$(document).ready(function(){
    var x = $('mydiv').width();
    var y = $('mydiv').height();

    parent.$.colorbox.resize({width:x, height:y});

});

Answer 2

В Colorbox 1.3 теперь можно вызывать функцию изменения размера:

$('.item').colorbox.resize();

Answer 3

Когда вы вызываете colorbox, просто добавьте к нему функцию onComplete, например,

$('.mycolorboxes').colorbox({    
  onComplete : function() { 
       $(this).colorbox.resize(); 
  }    
});

Поэтому каждый раз, когда содержимое загружается в цветовую коробку, оно запускает функцию изменения размера.

Answer 4

Мне нужно было использовать метод setTimeout , чтобы изменение размера работало для меня.
Я делаю ajax-вызов, чтобы получить изображение, жду 2 секунды и устанавливаю colorbox для этого изображения.
По окончании я изменяю размер colorbox с размером изображения.

Без тайм-аута это не сработало бы для меня, потому что картинка не была загружена полностью и получила width = 0, height = 0 как размер картинки.

$.get('/component/picture/getPicture.do?pictureId=' + id, 
       function(data) {  //callback function
           $('#pictureColorbox').html(data);  //set picture inside div on this page
           setTimeout(function(){  // set timeout 2 sec
               //create colorbox for inline content "#pictureColorbox" and call showPicture on complete
               $.colorbox({href:"#pictureColorbox", inline:true,  title:'', initialWidth:900, initialHeight:600,  scrolling:false, onComplete: function(){showPicture(id);}});
           }, 2000); 
       });

function showPicture(id) {
    var x = $('#' + id + " #picture").width();
    var y = $('#' + id + " #picture").height();
    $.colorbox.resize({innerWidth:x, innerHeight:y});
}

Answer 5

Просто поместите этот код на страницу, которая открывается в iframe:

$(document).ready(function() {
    parent.$.fn.colorbox.resize({
        innerWidth: $(document).width(),
        innerHeight: $(document).height()
    });
});

Answer 6

resize фактически принимает объект jQuery и использует его для изменения размера. Вместо этого вы можете просто перезагрузить colorbox так:

$(window).resize(function(){
    $.fn.colorbox.load();
}); 

Answer 7

Как я знаю, colorbox с iframe: true не может быть изменен. Цвет с iframe: false можно изменить только высоту (используя jQuery.fn.colorbox.resize()).

Answer 8

Итак, вот еще одно возможное решение, которое действительно легко реализовать (хотя оно будет работать на всех цветовых коробках, которые вы вызываете, поэтому в зависимости от вашей ситуации оно может быть не лучшим). Если это работает для вас, вы можете просто перетащить код в любом месте вашего кода, и он будет работать автоматически. Значения HEIGHT_PERCENTAGE и WIDTH_PERCENTAGE таковы, что вы можете указать, насколько велико будет изменяться размер окна относительно общего размера окна. Вы можете добавить некоторые другие значения для создания минимальных размеров и т. Д.

    $(function() {
        $(window).bind('resize', function() {

            var HEIGHT_PERCENTAGE = .60; // '1' would set the height to 100%
            var h = "innerHeight" in window 
               ? window.innerHeight
               : document.documentElement.offsetHeight; 
            h *= HEIGHT_PERCENTAGE;

            var WIDTH_PERCENTAGE = .40; // '1' would set the width to 100%
            var w = "innerHeight" in window 
               ? window.innerWidth
               : document.documentElement.offsetWidth;
            w *= WIDTH_PERCENTAGE;

            $.colorbox.resize({width: w, height: h});
        }).trigger('resize');
    });

Часть этого ответа адаптирована из: https://stackoverflow.com/a/3012772/1963978

Answer 9

$.colorbox.resize()

Это также будет работать с активным ящиком для цветов, если вы не знаете, селектор для активного ящика с цветами.

Answer 10

$(window).resize(function(){    
        $.colorbox.resize({
            maxWidth:"auto",
            width:95+'%',
        });
});