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

Ответ 1

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

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

Ответ 2

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

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

});

: D Надеюсь, это полезно и счастливое кодирование! Трей Пасхаль Веб-дизайнер/разработчик

Ответ 3

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

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

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

Ответ 4

Мне нужно было использовать метод setTimeout для работы с изменением размера для меня.
Я делаю ajax-вызов, чтобы получить изображение, подождите 2 секунды и установите 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});
}

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

Итак, вот еще одно возможное решение, которое действительно легко реализовать (хотя оно будет работать на всех colorboxes, которые вы вызываете, поэтому в зависимости от вашей ситуации это может быть не лучшим). Если это сработает для вас, вы можете просто перетащить код в любом месте вашего кода, и он будет работать автоматически. Значения 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');
    });

Часть этого ответа адаптирована из: fooobar.com/questions/166965/...

Ответ 9

Ну, я раньше не использовал Colorbox, но я использовал похожие вещи, и если я правильно понимаю, то, что вам нужно, это изменить стиль окна после того, как что-то было загружено.

Если вы обнаружите, какие значения id/class применяются к Colorbox, вы можете сделать так, чтобы при загрузке содержимого AJAX вызывается функция для изменения стиля соответствующей части Colorbox.

Ответ 10

Вы можете вызвать его в функции обратного вызова, которую он предоставляет:

$(".single").colorbox({}, function(){
     alert('Howdy, this is an example callback.');
});

Ответ 11

Ответ Криса заставил меня на полпути, но это вызвало массовую ошибку в IE7/8, поскольку она будет вызывать эту функцию каждый раз, когда окно изменяет размер и даже странно на некоторых кнопках asp.net, которые вызывают обратную передачу?!?! даже если нет активного colorbox.

Это, кажется, решает это:

    $(window).resize(function(){
               if ($('#colorbox').length) {
     if( $('#colorbox').is(':hidden') ) {                    
          }
         else {
           $.fn.colorbox.load();
         }
       }
    });

Он проверяет, что #colorbox существует с использованием .length, а затем проверяет, не скрывает ли он, что делает трюк, как я мог видеть в Firebug, что при закрытии colorbox он не полностью удаляется/уничтожается просто скрытым!

Надеюсь, что это поможет.

Ответ 12

Это можно сделать, если вы можете определить высоту/ширину содержимого в iframe, затем вы можете использовать функцию colorbox.resize(), чтобы снова изменить размер колонок.

Ответ 13

$.colorbox.resize()

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

Ответ 14

Не уверен, что вы ищете, но я нашел эту нить, когда искал собственное решение. У меня есть colorbox в режиме iframe. Там есть кнопка, которая при щелчке должна заменить текущий цветной блок на новый. Я просто делаю это...

parent.$.colorbox({
    href: newurl,
    iframe: true,
    width: "600px",
    height: "240px",
    onClosed: function() {
    }
});

Это перезагружает новую страницу в новый colorbox в том же месте, и переход очень плавный.

Ответ 15

Этот человек работает правильно, братья.

jQuery( document ).ready( function(){
var custom_timeout = ( function() {
    var timers = {};
    return function ( callback, ms, uniqueId ) {
        if ( !uniqueId ) {
            uniqueId = "Don't call this twice without a uniqueId";
        }
        if ( timers[uniqueId] ) {
            clearTimeout ( timers[uniqueId] );
        }
        timers[uniqueId] = setTimeout( callback, ms );
      };
})(); 
$(".group1").colorbox({rel:'group1', width:"80%" }); 
$( window ).resize( function(){
    custom_timeout(function(){
        if( $('#cboxOverlay' ).css( 'visibility' ) ){
            $(".group1").colorbox.resize({ innerWidth:'80%' });
        }
    }, 500 );
}); 
});

Посетите демонстрационную страницу

Ответ 16

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