jquery - 在窗口大小调整时调整 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) 当用户以标准 destop 大小加载颜色框，然后将视口(viewport)缩放得更窄时，cboxPhoto 元素的高度无法正确缩放。宽度正确缩小，但高度保持不变，形成“挤压”。所以我尝试将 height:auto 添加到 cboxPhoto 的 CSS 中。这会恢复纵横比，但现在 cboxPhoto 元素太大，并且被剪裁。我在模态中出现了滚动条，而以前没有。如果我关闭颜色框并在新的浏览器视口(viewport)宽度下重新打开它，照片的尺寸并不相同。

2) cboxTitle 的 CSS 不会被重新计算。颜色框调整大小函数似乎不会触发 cbox_complete 事件。不应该吗？

我很想解决这些问题，但我也感觉到，鉴于插件的当前状态，解决此用例的最简单方法可能是在调整窗口大小时关闭并重新加载整个颜色框，但是返回到用户在调整大小事件之前正在查看的图库中完全相同的内容。但我很不清楚如何编码。预先感谢您的帮助!

附注大家请不要再争论只有设计师才能调整 window 的大小。抱歉，我只是不买那个。当屏幕上出现令人惊叹的照片时，人们会放大，尤其是平板电脑会一直旋转......

Answer 1

在这种情况下我会阻止使用$.resize。我认为 CSS 媒体查询 为响应式设计提供了动力。那么为什么不使用媒体查询。

我从未在实践中尝试过 colorbox，但我猜 $.colorbox.settings.width = "92%"; 会插入一个内联 CSS 元素。

删除这些设置。防止 colorbox 元素中出现任何内联 CSS。然后，只需使用 CSS 指定宽度和高度，即可对较大的桌面进行初始缩放。

并使用媒体查询在窗口调整大小时放大模式尺寸。

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

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

多个查询也是完全合法的。因此，您可以将模态尺寸设置为更小的尺寸。

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

您可以使用 px 而不是 %，但在这种情况下，当从一种尺寸移动到另一种尺寸时，您的颜色框模态宽度/高度会稍微跳跃。但在这种情况下，您可以使用 CSS 的 transition 属性来使调整大小过程更加顺畅。