我在一个响应式网站中使用了colorbox。我希望Colorbox根据屏幕/移动设备的大小和方向自动调整：如果我更改屏幕/移动设备的方向（即如果我旋转手机调整水平和垂直图片到屏幕尺寸，我希望Colorbor自动调整到屏幕的新大小/方向）。现在只有 ，Colorbox仅在新图片加载时自动调整自身（以幻灯片为例）。如何使colorbox响应
我问的问题封闭谷歌组：
https://groups.google.com/group/colorbox/browse_thread/thread/85b8bb2d8cb0cc51?hl=fr
我创建GitHub上两个特征要求：
https://github.com/jackmoore/colorbox/issues/158
，但我没有任何反应，所以我尝试堆栈溢出...
有谁知道是否有可能让ColorBox自动启动，根据方向更改调整大小 （可能在解决方法中使用回调函数）？
在此先感谢任何帮助。
您应该考虑使用@media query colorBox css文件“框架”，就像您对其余的CSS所做的一样。
我在Drupal site找到了解决办法采用彩盒的OFF功能：
if (window.matchMedia) {
// Establishing media check
width700Check = window.matchMedia("(max-width: 700px)");
if (width700Check.matches){
$.colorbox.remove();
}
}
您需要重新启动一个窗口大小的彩盒。
我的解决方案有助于在网站无法响应并且您希望在移动设备上显示颜色框。我个人用它来存储reCaptcha表单，所以它是强制性的。
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
$.colorbox({reposition: true, top: 0, left: 0, transition: 'none', speed:'50', inline:true, href:"#contactus"}).fadeIn(100);
} else {
$.colorbox({width:"400px", height:"260px", transition: 'none', speed:'50', inline:true, href:"#contactus"}).fadeIn(100);
}
我解决它使用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 $。
调用此有关的窗口大小调整和/或“orientationchange” 其中960是我的颜色框首选宽度，和我的maxWidth = 95％
var myWidth = 960, percentageWidth = .95;
if ($('#cboxOverlay').is(':visible')) {
$.colorbox.resize({ width: ($(window).width() > (myWidth+20))? myWidth : Math.round($(window).width()*percentageWidth) });
$('.cboxPhoto').css({
width: $('#cboxLoadedContent').innerWidth(),
height: 'auto'
});
$('#cboxLoadedContent').height($('.cboxPhoto').height());
$.colorbox.resize();
}
我尝试了许多解决方案在这里的，但是从以下在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
这应该是被接受的答案。这很简单，而不是黑客，它提供了所有需要的选项。很长一段时间以来我一直在使用colorbox作为响应式项目 - 而这个解决方案击败了所有其他项目。谢谢！ –
通过使用maxWidth/maxHeight的整数，您可以缩短它。因此parseInt获得冗余而不会丢失功能。 –
这一个正常工作的兄弟。
jQuery(document).ready(function(){
var custom_timeout = (function() {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();
$(".group1").colorbox({rel:'group1', width:"80%" });
$(window).resize(function(){
custom_timeout(function(){
if($('#cboxOverlay').css('visibility')){
$(".group1").colorbox.resize({ innerWidth:'80%' });
}
}, 500);
});
}）;
我在CSS的YouTube视频中所做的这一点，但照顾，它可以减少一些垂直图像。
@media (max-width: 480px) {
#colorbox {
max-height:218px !important;
}
#cboxWrapper *, #cboxWrapper {
height:auto !important;
}
}
文件只是使波纹管chnage
24行： -
maxWidth: "100%",
不作任何其他的变化都将是工作的罚款与所有响应效果:)
这是为我工作的解决方案，我拿出了最初由Shabith发布的计时器的东西。
/**
* Auto Re-Size function
*/
function resizeColorBox()
{
if (jQuery('#cboxOverlay').is(':visible')) {
jQuery.colorbox.resize({width:'100%', height:'100%'});
}
}
// Resize Colorbox when resizing window or changing mobile device orientation
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);
学分转到：shabith
这种添加到您的主js文件加载后的颜色框相关的js和jQuery LIB文件。
(function ($, window, document, undefined) {
//Configure colorbox call back to resize with custom dimensions
$.colorbox.settings.onLoad = function() {
colorboxResize();
}
//Customize colorbox dimensions
var colorboxResize = function(resize) {
var width = "90%";
var height = "90%";
if($(window).width() > 960) { width = "860" }
if($(window).height() > 700) { height = "630" }
$.colorbox.settings.height = height;
$.colorbox.settings.width = width;
//if window is resized while lightbox open
if(resize) {
$.colorbox.resize({
'height': height,
'width': width
});
}
}
//In case of window being resized
$(window).resize(function() {
colorboxResize(true);
});
})(jQuery, this, this.document);
颜色框JS锁之前，插入下面的代码：
jQuery.colorbox.settings.maxWidth = '95%';
jQuery.colorbox.settings.maxHeight = '95%';
var resizeTimer;
function resizeColorBox()
{
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if (jQuery('#cboxOverlay').is(':visible')) {
jQuery.colorbox.load(true);
}
}, 300);
}
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);
离开左，右，底部和顶部值“假”，它会自动做计算。它为我工作，所以我要去了！
我想在这里添加一个答案。我需要通过考虑不同的断点宽度来改变colorbox的响应，并根据窗口宽度改变popover的宽度。基本上，当在浏览器中显示时，我可以在彩盒的左侧和右侧留出空白空间，但不能在手机/平板电脑上显示空白空间。
我已经使用了应答的概念就在这个岗位（https://stackoverflow.com/a/23431190/260665），但做一些修改：
/**
* Raj: Used basic source from here: https://stackoverflow.com/a/23431190/260665
**/
// Make sure the options are sorted in descending order of their breakpoint widths
var cboxDefaultOptions =
[
{
breakpointMinWidth: 1024,
values: {
width : '70%',
maxWidth : '700px',
}
},
{
breakpointMinWidth: 640,
values: {
width : '80%',
maxWidth : '500px',
}
},
{
breakpointMinWidth: 320,
values: {
width : '95%',
maxWidth : '300px',
}
}
];
$(window).resize(function(){
// alert (JSON.stringify($.colorbox.responsiveOptions));
// var respOpts = $.colorbox.attr('responsiveOptions');
var respOpts = $.colorbox.responsiveOptions;
if (respOpts) {
var breakpointOptions = breakpointColorboxOptionsForWidth (window.innerWidth);
if (breakpointOptions) {
$.colorbox.resize({
width: window.innerWidth > parseInt(breakpointOptions.values.maxWidth) ? breakpointOptions.values.maxWidth : breakpointOptions.values.width,
});
}
}
});
function breakpointColorboxOptionsForWidth (inWidth) {
var breakpointOptions = null;
for (var i=0; i<cboxDefaultOptions.length; i++) {
var anOption = cboxDefaultOptions[i];
if (inWidth >= anOption.breakpointMinWidth) {
breakpointOptions = anOption;
break;
}
}
return breakpointOptions;
}
用法：
$.colorbox.responsiveOptions = cboxDefaultOptions;
当制备颜色框对象只需添加这种额外属性。我们还可以配置cboxDefaultOptions或向$.colorbox.responsiveOptions提供不同的自定义值对象，以便在需要时加载不同的断点。
来自colorbox的所有者的答复。
window.addEventListener("orientationchange", function() {
if($('#cboxOverlay').is(':visible'){
$.colorbox.load(true);
}
}, false);
colorbox的所有者从1.4.5中的公共API中移除'load（）'函数，此答案不再有效。对于继续讨论和可能的解决方案：https：//github.com/jackmoore/colorbox/issues/158 – JPMC
我知道你在十月份就回答了这个问题，但是你会澄清一下你的意思吗？ – Duncanmoo