在窗口调整大小时调整Colorbox的大小

Question

Colorbox似乎非常适合"开箱即用"的响应式设计.我用百分比覆盖默认维度设置,然后设置最大值,以便在大屏幕上不会失控:

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

这样可行.我也正在调整cboxTitle元素的大小,使其正好在它上面的img的宽度上,这样我的有时冗长的标题总是很好地排列.

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

这似乎也有效.这留下了可怕的部分:处理窗口调整大小事件.我正在尝试以下方法

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

(我实际上是使用自定义的debouncedresize事件而不是标准的jquery调整大小,以便在Webkit中限制调整大小事件的流,但是我要离开那部分,因为它不相关.而且,我正在重复调整大小选项中相同的宽度和高度百分比值,因为否则不会调整大小.:()

最后一部分根本不起作用.我会尝试解决这些问题:

1)当用户以标准去除大小加载颜色框然后缩小视口范围时,cboxPhoto元素的高度不能正确缩放.宽度正在缩小,但高度保持不变,造成"挤压".所以我尝试添加height:auto到css中cboxPhoto.这恢复了宽高比,但现在cboxPhoto元素太大了,被剪裁了.我以前没有在模态中使用滚动条.如果我关闭彩色框并在新的浏览器视口宽度重新打开它,则照片的大小不会达到.

2)cboxTitle没有重新计算css for .颜色框调整大小功能似乎不会触发cbox_complete事件.不应该吗？

我想解决这些问题,但我也感觉到,考虑到插件的当前状态,解决这个用例的最简单方法是在调整窗口大小时关闭并重新加载整个颜色框,但是回过头来用户在调整大小事件之前查看的库中完全相同的内容.但我还不清楚如何编码.在此先感谢您的帮助!

PS大家,请告诉我,只有设计师才能调整窗口大小.对不起,我只是不买.当屏幕上出现令人惊叹的照片时,人们会向上扩展,而平板电脑尤其会一直旋转......

Answer 1

你有没有尝试过这样的事情：

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

尝试不使用“.fn”并延迟一些......