我在响应式网站中使用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。