jquery – 如何使colorbox响应

前端之家收集整理的这篇文章主要介绍了jquery – 如何使colorbox响应前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在响应式网站中使用colorBox

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

我问在关闭google组中的问题:

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

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

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

但我没有任何反应,所以我尝试Stack Overflow …

有谁知道是否可以得到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。

原文链接:https://www.f2er.com/jquery/184368.html

猜你在找的jQuery相关文章