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 resize，以便在Webkit中限制调整大小事件的流，但是我要离开那部分，因为它不相关另外，我在调整大小选项中重复相同的宽度和高度百分比值，因为否则不会调整大小。:(）

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

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

2）cboxTitle的css没有重新计算。 colorbox resize功能似乎不会触发cbox_complete事件。不应该吗？

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

P.S。每个人，请不要让我认为只有设计师才能调整窗口大小。对不起，我只是不买。当屏幕上出现令人惊叹的照片时，人们会放大，而平板电脑尤其会一直旋转......

Answer 1

在这种情况下，我会阻止使用$.resize。我认为CSS Media Queries支持响应式设计。那么为什么不使用媒体查询。

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

删除这些设置。防止colorbox元素中的任何内联CSS。然后，只需使用CSS为width和height提供大型桌面的初始缩放。

并使用Media Queries在窗口调整大小上缩放模式大小。

#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属性使调整大小过程更加顺畅。

Answer 2

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

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

尝试没有'.fn'并且有一些延迟......

Answer 3

您可以在调整大小时设置颜色框窗口的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%';
    }
});

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

3 个答案: