how - ¿Cómo puedo redimensionar dinámicamente el plugin jQuery Colorbox?

modal responsive jquery

Question

El contenido de AJAX cargado en un Colorbox tiene algo de JavaScript incluido que cambia el tamaño de las cosas dentro del contenido. Colorbox determina su tamaño en función de los tamaños antes de que ocurra todo el AJAX. ¿Cómo puedo hacer que el Colorbox cambie de tamaño una vez que se haya cargado el contenido?

Aquí hay un enlace donde alguien dijo que puede volver a llamar a colorbox () después de haber sido cargado, pero no puedo encontrar la manera de hacerlo:

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

Answer 1

Bueno, no he usado Colorbox antes, pero he usado cosas similares, y si lo entiendo correctamente, lo que necesita hacer es cambiar el estilo de la caja después de que se haya cargado algo.

Si encuentra qué valores de identificación / clase se aplican al Colorbox, puede hacerlo de modo que cuando se carga el contenido AJAX, se llame a una función para cambiar el estilo de la parte apropiada del Colorbox.

Answer 2

Como sé, colorbox with iframe: true no se puede cambiar de tamaño. Color con iframe: false puede cambiar el tamaño de la altura (usando jQuery.fn.colorbox.resize() ).

Answer 3

Cuando invoque el colorbox, simplemente agregue una función onComplete , por ejemplo

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

Por lo tanto, cada vez que se carga contenido dentro del colorbox, se inicia su función de cambio de tamaño.

Answer 4

En Colorbox 1.3, ahora puede llamar a la función de cambio de tamaño:

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

Answer 5

Entonces, aquí hay otra solución posible que es realmente fácil de implementar (aunque funcionará en todos los colores que está llamando, por lo que dependiendo de su situación podría no ser la mejor). Si esto funciona para usted, puede simplemente arrastrar y soltar el código básicamente en cualquier parte de su código y funcionará automáticamente. Los valores HEIGHT_PERCENTAGE y WIDTH_PERCENTAGE permiten configurar el tamaño de la ventana en relación con el tamaño general de la ventana. Puede agregar algunos otros valores para crear tamaños mínimos, etc.

    $(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'');
    });

Parte de esta respuesta se ha adaptado de: https://.com/a/3012772/1963978

Answer 6

Este está trabajando adecuadamente hermanos.

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

Answer 7

Esto se puede hacer si puede detectar el alto / ancho del contenido en iframe, luego puede usar la función colorbox.resize () para cambiar el tamaño del colorbox nuevamente.

Answer 8

La respuesta de Chris me llevó a la mitad, pero causó un error masivo en IE7 / 8, ya que llamará a esa función cada vez que cambie el tamaño de la ventana, e incluso extrañamente, en algunos botones de asp.net que causan una devolución de datos?!?! incluso cuando no hay un colorbox activo.

Esto parece resolverlo:

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

Comprueba que #colorbox exista usando .length, y luego comprueba que no está oculto, lo que hace el truco, ya que pude ver en Firebug que cuando cierras el cuadro de color no se elimina del todo o se destruye ¡simplemente se oculta!

Espero que esto ayude..

Answer 9

Necesitaba usar el método setTimeout para que el cambio de tamaño me funcionara.
Hago una llamada ajax para obtener una imagen, espere 2 segundos y configure el colorbox para esta imagen.
Al completar el tamaño del cuadro de color con el tamaño de la imagen.

Sin tiempo de espera no funcionó para mí porque la imagen no se cargó completamente y se obtuvo un ancho = 0, altura = 0 como tamaño de la imagen.

$.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 10

No estoy seguro de lo que está buscando, pero encontré este hilo mientras buscaba mi propia solución. Tengo un colorbox en modo iframe. Hay un botón allí que cuando se hace clic, necesita reemplazar el actual colorbox por uno nuevo. Solo hago esto ...

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

Esto vuelve a cargar una nueva página en un nuevo colorbox en la misma ubicación y la transición es muy fluida.

Answer 11

Para cambiar el tamaño del cuadro de colores dinámicamente que desea decir.

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

Si desea cambiar el tamaño de un cuadro de color que carga un Iframe, debería agregar algo como esto al encabezado de su documento de destino.

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

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

});

Answer 12

Puede llamarlo en una función de devolución de llamada que proporciona:

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

Answer 13

Simplemente ponga este código en la página que se abre en el iframe :

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

Answer 14

el tamaño realmente toma un objeto jQuery y lo usa para hacer el cambio de tamaño. En cambio, puede hacer que la caja de color se vuelva a cargar así:

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

Answer 15

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

Answer 16

$.colorbox.resize()

Esto también funcionará en el colorbox activo si no conoce el selector para el colorbox activo.