我在响应式网站中使用颜色框。
我有一个要求：我希望 Colorbox 自动调整自己以适应屏幕/移动设备的大小和方向：如果我改变屏幕/移动设备的方向（即，如果我旋转我的手机以将水平和垂直图片调整为屏幕尺寸，我希望 Colorbor 自动调整到屏幕的新尺寸/方向）。目前，Colorbox 仅在加载新图片时自动调整自身（例如幻灯片）。
我在封闭的谷歌小组中问了这个问题：
https://groups.google.com/group/colorbox/browse_thread/thread/85b8bb2d8cb0cc51?hl=fr
我在 github 上创建了两个功能请求：
https://github.com/jackmoore/colorbox/issues/158
但我没有任何回应，所以我尝试堆栈溢出......
有谁知道是否可以让 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替换为$。
我在这里尝试了许多解决方案，但 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
看起来这个问题已经讨论过了，作者的 github 上提供了可行的解决方案
在窗口调整大小和/或“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();
}
加载与颜色框相关的 js 和 jquery lib 文件后，将此添加到您的主 js 文件中。
(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);
您应该考虑使用 @media 查询 colorBox css 文件的“框架”，就像您对其余 css 所做的那样。
这个工作正常的兄弟。
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 );
});
});
访问演示页面
在 jQuery.colorbox.js 文件中进行此更改
第 24 行：-
maxWidth: "100%",
不要进行任何其他更改，所有响应效果都会正常工作:)
我在 CSS 中为 youtube 视频框制作了这个，但请注意，它可能会剪切一些垂直图像。
@media (max-width: 480px) {
#colorbox {
max-height:218px !important;
}
#cboxWrapper *, #cboxWrapper {
height:auto !important;
}
}
这是对我有用的解决方案，我取出了最初由 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
这是我在这个问题上使用过的最佳解决方案，即使您使用 CDN 来集成彩盒
在您添加脚本以集成您的颜色框的标题中，只需在脚本开始之前添加它
// Make ColorBox responsive
jQuery.colorbox.settings.maxWidth = '95%';
jQuery.colorbox.settings.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);
我在Drupal 网站上找到的一个解决方案使用了 Colorbox 的 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);
}
彩盒所有者的回答。
window.addEventListener("orientationchange", function() {
if($('#cboxOverlay').is(':visible'){
$.colorbox.load(true);
}
}, false);
我想在这里添加一个答案。我需要通过尊重不同的断点宽度并根据窗口宽度更改弹出框的宽度来使颜色框响应。基本上，当颜色框显示在浏览器中时，我可以在颜色框的左侧和右侧留出空白空间，但在手机/平板电脑中显示时则不行。
我已经使用了这篇文章（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;
当 colorbox 对象准备好时，只需将这个附加属性添加到它。我们还可以配置 cboxDefaultOptions 或提供不同的自定义值对象，$.colorbox.responsiveOptions以便在需要时加载不同的断点。
在colorbox js lock之前，插入以下代码：
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);
将左侧、右侧、底部和顶部的值保留为“false”，它将自动进行计算。它对我有用，所以我要过去了！