Cambiar el tamaño de Colorbox en el tamaño de la ventana

Question

Colorbox parece ser muy adecuado "listo para usar" para un diseño receptivo. Estoy anulando la configuración por defecto dimensión con porcentajes, y luego establecer los valores máximos por lo que las cosas no se salgan de control en grandes pantallas:

$.colorbox.settings.width = "92%"; 
$.colorbox.settings.height = "90%"; 
$.colorbox.settings.maxHeight = 850; 
$.colorbox.settings.maxWidth = 1200; 

que funciona. También estoy dimensionando el elemento cboxTitle para que sea exactamente el ancho del img que está sobre él, de modo que mis leyendas a veces largas siempre estén alineadas correctamente.

$(document).bind('cbox_complete', function(){ 
    var photoWidth = $(".cboxPhoto").innerWidth(); 
    var photoContainer = $("#cboxContent").outerWidth(); 
    var leftPix = (photoContainer - photoWidth)/2;  
    $("#cboxTitle").css({'left' : leftPix, 'width' : photoWidth}); 
}); 

Lo cual también parece funcionar. Eso deja la parte aterradora: lidiar con eventos de cambio de tamaño de ventana. Estoy tratando los siguientes

$(window).on("resize", function(){ 
    $.fn.colorbox.resize({ 
     height: "90%", 
     width: "92%" 
    }); 
}); 

(En realidad estoy usando un evento personalizado debouncedresize en lugar del cambio de tamaño estándar de jQuery, con el fin de estrangular el flujo de eventos de cambio de tamaño en Webkit, pero estoy dejando esa parte porque no es relevante. Además, estoy repitiendo los mismos valores de porcentaje de ancho y alto en las opciones de cambio de tamaño porque de lo contrario no se cambia el tamaño. :()

Esta última parte no funciona en absoluto. intente desglosar los problemas:

1) Cuando el usuario carga un colorbox en un tamaño destop estándar y luego escala la ventana n arrower, la altura del elemento cboxPhoto no está escalando correctamente. El ancho se está encogiendo correctamente, pero la altura permanece igual, creando un "apretón". Así que traté de agregar height:auto al CSS para cboxPhoto. Eso restaura la relación de aspecto, pero ahora el elemento cboxPhoto es demasiado grande y está recortado. Estoy recibiendo barras de desplazamiento dentro del modal cuando no lo hacía antes. La foto no tiene el tamaño que tendría si cerrara el cuadro de colores y lo volviera a abrir en el nuevo ancho de la ventana del navegador.

2) El css para cboxTitle no se está recalculando. La función de cambio de tamaño del colorbox no parece desencadenar el evento cbox_complete. ¿No debería?

Me encantaría solucionar estos problemas, pero también creo que quizás la forma más sencilla de abordar este caso de uso dado el estado actual del complemento es cerrar y volver a cargar todo el colorbox cuando la ventana cambie de tamaño, pero vuelva al mismo contenido exactamente en la galería que el usuario estaba mirando antes del evento de cambio de tamaño. Pero no tengo muy claro cómo codificar eso. ¡Gracias de antemano por cualquier ayuda!

P.S. Todos, por favor, eviten el argumento de que solo los diseñadores cambian el tamaño de las ventanas. Lo siento, simplemente no compro eso. La gente aumente la capacidad cuando una foto es impresionante en la pantalla, y en especial tabletas girará todo el tiempo ...

Answer 1

¿Alguna vez intentar algo como esto:

if($('#colorbox').length && $('#colorbox').css('display') != 'none') { 
     setTimeout(function(){ 
       $.colorbox.resize({ 
        width: '100%', 
        height: '80%' 
       }); 
      }, 1500); 
    } 

intento sin el '.Fn' y con un poco de retraso, también ...

Answer 2

¿Podría simplemente establecer el ancho y alto de CSS de la ventana de la caja de color en el cambio de tamaño?

$(window).on("resize", function(){ 
    //check if colorbox is open. This 'if' is from stackoverflow, I haven't tested 
    if($('#colorbox').length && $('#colorbox').css('display') != 'none') { 
     //replace colorboxID with the correct ID colorbox uses 
     document.getElementById('coloboxID').style.width='92%'; 
     document.getElementById('coloboxID').style.height='90%'; 
    } 
}); 

Answer 3

Yo evitaría el uso de $.resize en tales casos. Considero que CSS Media Queries potencia el diseño receptivo. Entonces, ¿por qué no usar consultas de medios?

Nunca he intentado colorbox en la práctica, pero supongo que $.colorbox.settings.width = "92%"; inserta un en línea para el elemento.

Elimina esa configuración. Evite cualquier CSS en línea en su elemento de cuadro de color. Luego simplemente use CSS para dar width y height para la escala inicial para escritorios más grandes.

Y use Media Queries para ampliar los tamaños modales en el cambio de tamaño de la ventana.

#colorbox{ 
    height: 90%; 
    width: 92%; 
} 

@media (max-width: 992px) { 
    #colorbox{ 
     height: 90%; 
     width: 92%; 
    } 
} 

Múltiples-consultas son también perfectamente legal. Por lo tanto, puede establecer los tamaños modales incluso en tamaños más pequeños.

@media (max-width: 430px) { 
    #colorbox{ 
     height: 96%; 
     width: 98%; 
    } 
} 

Es posible utilizar en lugar de px%, pero en este caso, colorbox modal anchura/altura estaría saltando un poco de ser cuando se pasa de un tamaño a otro. Pero puede usar la propiedad transition de CSS para hacer que el proceso de redimensionamiento sea más suave en este caso.