如何使Colorbox响应 [英] how to make colorbox responsive

问题描述

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

I am using colorbox in a responsive website.

我有一个要求:我希望Colorbox会自动调整其大小以适应屏幕/移动设备的尺寸和方向:如果更改屏幕/移动设备的方向(即如果我旋转移动设备以调整水平和垂直方向)图片到屏幕大小，希望Colorbor自动将其调整为新的屏幕大小/方向. 目前，Colorbox仅在加载新图片时自动进行自我调整(例如在幻灯片放映中).

I have a request : I wish that Colorbox automatically adjusts itself to the size and orientation of the screen / mobile device : if I change the orientation of the screen / mobile device (ie if I rotate my mobile to adjust horizontal and vertival pictures to the screen size, I wish that Colorbor automatically adjusts itself to the new size / orientation of the screen). for now, Colorbox only automatically adjusts itself on load of a new picture (in a slideshow for exemple).

我在封闭的Google网上论坛中问了这个问题:

I asked the question in the closed google group :

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

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

I created two feature requests on github :

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

但是我没有任何回应，所以我尝试了Stack Overflow ...

but I don't have any response, so I try on Stack Overflow...

有人知道是否有可能让ColorBox基于自动调整大小 改变方向(也许在变通方法中使用回调函数)?

Does anyone know if it's possible to get ColorBox to auto-resize based on orientation change (maybe with a callback function in a workaround)?

首先感谢您的帮助.

推荐答案

我使用颜色框初始化上的 maxWidth 和 maxHeight 选项解决了该问题，如开发者网站上所述:

I solved it using the maxWidth and maxHeight options on colorbox initialization, as explained on the developer's website :

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

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

You can also add this snippet to resize the colorbox when resizing the window or changing your mobile device's orientation :

/* 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 替换为 $ .

这篇关于如何使Colorbox响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！