调整Colorbox大小以适应窗口大小的变化

Question

Colorbox 似乎非常适合响应式设计。我正在使用百分比来覆盖默认的尺寸设置，然后设置最大值，以避免在超大屏幕上变得混乱：

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

那样做可以。我还调整了cboxTitle元素的大小，使其与上面的图像的宽度完全一致，这样我的有时很长的字幕就总是能够整齐地排列。

$(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 resize事件，以便在Webkit中限制调整大小事件的流，但我将其省略，因为它与问题无关。此外，我在调整大小选项中重复相同的宽度和高度百分比值，否则不会发生调整大小。 :( )

最后这部分完全不起作用。我尝试分解一下问题：

1）当用户在标准桌面大小下加载colorbox，然后缩小视口时，cboxPhoto元素的高度没有正确缩放。宽度正确缩小，但高度保持不变，创建了“挤压”效果。所以我尝试在cboxPhoto的css中添加height:auto。这可以恢复纵横比，但现在cboxPhoto元素太大了，而且被裁剪了。我之前没有出现模态框内滚动条的情况。照片的大小并不是如果我以新的浏览器视口宽度关闭colorbox并重新打开它时的大小。

2）cboxTitle的CSS没有被重新计算。colorbox重新调整大小的函数似乎没有触发cbox_complete事件。难道不应该吗？

我很想解决这些问题，但我也意识到，考虑到插件的当前状态，处理这种情况的最简单方法可能是在窗口调整大小时关闭和重新加载整个colorbox，但回到用户在调整大小事件之前正在查看的相册内容。但我对如何编写代码并不明确。感谢您提前提供任何帮助！

P.S.请大家不要跟我争论只有设计师才会调整窗口大小的事情。抱歉，我就是不信。当一张令人惊叹的照片出现在屏幕上时，人们会放大它，而且平板电脑特别经常旋转...

- Ben

---

这是我在SO上看过的最仔细的问题之一，谢谢。关于第二点，我的想法是这是插件作者的选择。调整大小=重新显示；理智的人可以有不同的看法。你的解决方法听起来很方便。 - CSSian

这里有什么新闻吗？我非常感兴趣！ - headkit

Answer 1

我建议在这种情况下不要使用$.resize。我认为CSS 媒体查询支持响应式设计。那么为什么不使用媒体查询呢？

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

移除这些设置。避免在您的colorbox元素中使用任何内联CSS。然后仅使用CSS为较大的桌面计算机进行初始缩放的width和height。

并使用媒体查询在窗口调整大小时扩展模态大小。

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

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

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

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

你可能会使用px代替%，但在这种情况下，当从一个大小移动到另一个大小时，你的colorbox模态框宽度/高度会有点跳动。但是你可以使用CSS的transition属性来使调整大小过程更加平滑。

- Zafar

Answer 2

你能否在调整大小时简单设置Colorbox窗口的CSS高度和宽度？

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

- Son of Thom

Answer 3

你曾经尝试过类似这样的东西吗：

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

尝试不带 '.fn' 并加上一些延迟...

- headkit

---

是的，那行不通。我仍在寻找答案！ - Ben

也许你需要在调整大小时关闭窗口，然后在一段时间内不再发生调整大小事件时重新打开它。 - headkit

不要依赖计时器。 - Rafael Herscovici