10

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 大小加载颜色框，然后将视口缩放得更窄时，cboxPhoto元素的高度无法正确缩放。宽度正确缩小，但高度保持不变，产生“挤压”。所以我尝试添加height:auto到 css for cboxPhoto. 这恢复了纵横比，但现在cboxPhoto元素太大了，并且被剪裁了。我以前没有在模态框内获得滚动条。如果我关闭颜色框并以新的浏览器视口宽度重新打开它，照片的大小将不会如此。

cboxTitle2）没有重新计算css 。颜色框调整大小功能似乎不会触发cbox_complete事件。不应该吗？

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

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

4

3 回答 3

1

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

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

删除这些设置。防止颜色框元素中的任何内联 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属性使调整大小的过程更加顺畅。

于 2014-02-14T09:20:41.540 回答
0

你能简单地在调整大小时设置颜色框窗口的 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%';
    }
});
于 2013-06-26T16:33:01.453 回答
0

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

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

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

于 2012-08-12T21:03:46.590 回答