如何使彩色盒响应

Question

我在响应式网站中使用colorbox.

我有一个请求:我希望Colorbox自动调整屏幕/移动设备的大小和方向:如果我改变屏幕/移动设备的方向(即如果我旋转我的手机以调整水平和垂直图片到屏幕尺寸,我希望Colorbor自动调整到屏幕的新尺寸/方向).目前,Colorbox仅在新图片的加载时自动调整(例如幻灯片放映).

我在封闭的谷歌小组中问了这个问题:

https://groups.google.com/group/colorbox/browse_thread/thread/85b8bb2d8cb0cc51?hl=fr

我在github上创建了两个功能请求:

https://github.com/jackmoore/colorbox/issues/158

但我没有任何回应,所以我尝试Stack Overflow ...

有没有人知道是否有可能让ColorBox根据方向变化自动调整大小(可能在变通方法中使用回调函数)？

在此先感谢任何帮助.

Answer 1

我在colorbox初始化时使用maxWidth和maxHeight选项解决了它,如开发人员网站上所述:

jQuery(*selector*).colorbox({maxWidth:'95%', maxHeight:'95%'});

您还可以在调整窗口大小或更改移动设备的方向时添加此代码段以调整颜色框的大小:

/* Colorbox resize function */
var resizeTimer;
function resizeColorBox()
{
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
            if (jQuery('#cboxOverlay').is(':visible')) {
                    jQuery.colorbox.load(true);
            }
    }, 300)
}

// Resize Colorbox when resizing window or changing mobile device orientation
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);

最终,取代的jQuery的$.

Answer 2

我在这里尝试了很多解决方案,但是来自github上的@berardig的以下内容对我来说非常好

var cboxOptions = {
  width: '95%',
  height: '95%',
  maxWidth: '960px',
  maxHeight: '960px',
}

$('.cbox-link').colorbox(cboxOptions);

$(window).resize(function(){
    $.colorbox.resize({
      width: window.innerWidth > parseInt(cboxOptions.maxWidth) ? cboxOptions.maxWidth : cboxOptions.width,
      height: window.innerHeight > parseInt(cboxOptions.maxHeight) ? cboxOptions.maxHeight : cboxOptions.height
    });
});

资料来源:https://github.com/jackmoore/colorbox/issues/183#issuecomment-42039671

Answer 3

看起来已经讨论过这个问题并且在作者的github上提供了工作解决方案

https://github.com/jackmoore/colorbox/issues/158

Answer 4

您应该考虑使用 @media query colorBox css 文件进行“框架”，就像处理其余 css 一样。