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

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元素的高度未正确缩放.宽度正在缩小,但高度保持不变,造成“挤压”.所以我尝试将高度：auto添加到cBox for cBoxPhoto.这恢复了宽高比,但现在cBoxPhoto元素太大了,并且被剪裁了.我以前没有在模态中使用滚动条.如果我关闭彩色框并在新的浏览器视口宽度重新打开它,则照片的大小不会达到.

2)没有重新计算cBoxTitle的css. colorBox resize函数似乎不会触发cBox_complete事件.不应该吗？

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

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

解决方法

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

我在练习中从未尝试过colorBox,但我猜$.colorBox.settings.width =“92％”;为元素插入内联CSS.

删除这些设置.防止colorBox元素中的任何内联CSS.然后只需使用CSS为较大桌面的初始缩放提供宽度和高度.

并使用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属性使调整大小过程更加平滑.

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

解决方法

猜你在找的jQuery相关文章