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:Cambiar el tamaño de Colorbox en el tamaño de la ventana
$.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 ...
Esta es una de las preguntas más cuidadosamente hechas que he visto en SO; gracias por eso. Re # 2, mi pensamiento es que es la elección del autor del complemento. Cambia el tamaño = vuelve a mostrar; mentes razonables pueden diferir. Su solución parece conveniente. –
alguna noticia aquí? ¡Estoy muy interesado! – headkit