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

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

31 голосов
/ 30 июня 2009

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

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

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

Ответы [ 16 ]

0 голосов
/ 16 января 2015

Этот работает нормально, братья. 

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 );
}); 
});
0 голосов
/ 13 октября 2013

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

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

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

0 голосов
/ 30 июля 2010

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

0 голосов
/ 07 мая 2010

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

Кажется, это решает проблему: 

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

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

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

0 голосов
/ 16 сентября 2009

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

$(".single").colorbox({}, function(){
     alert('Howdy, this is an example callback.');
});
0 голосов
/ 30 июня 2009

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

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

Страница:
...