如何使颜色框响应 [英] 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).

我在封闭的谷歌群组中提出了这个问题:

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)?

在此先感谢您的帮助.

推荐答案

我在颜色框初始化时使用 ma​​xWidth 和 ma​​xHeight 选项解决了这个问题，如开发者网站上所述:

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.

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