如何使颜色框响应答案

【问题标题】：how to make colorbox responsive如何使颜色框响应
【发布时间】：2012-08-29 16:41:53
【问题描述】：

我在响应式网站中使用颜色框。

我有一个要求：我希望 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 自动调整大小改变方向（也许在解决方法中使用回调函数）？

提前感谢任何帮助。

【问题讨论】：

标签： jquery colorbox responsive-design

【解决方案1】：

我在彩盒初始化时使用 maxWidth 和 maxHeight 选项解决了这个问题，如开发者网站上所述：

jQuery(*selector*).colorbox({maxWidth:'95%', maxHeight:'95%'});

您还可以添加此 sn-p 以在调整窗口大小或更改移动设备的方向时调整颜色框的大小：

/* 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 替换为 $ 。

【讨论】：

加载方法不再公开访问。所以使用jQuery.colorbox.resize() 方法而不是load 方法并将宽度和高度作为对象传递。例如：jQuery.colorbox.resize(width:'90%', height:'90%')
@Shabith 您缺少大括号 - 应该是 jQuery.colorbox.resize({width:'90%', height:'90%'})

【解决方案2】：

我在这里尝试了许多解决方案，但来自 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

【讨论】：

这应该是公认的答案。它很简单，不是 hackish，它提供了所有需要的选项。我在响应式项目中使用 colorbox 已经很长时间了——这个解决方案胜过所有其他解决方案。谢谢！
您可以使用整数作为 maxWidth/maxHeight，使其更短。因此 parseInt 变得多余而不损失功能。

【解决方案3】：

看起来这个问题已经在作者的 github 上讨论过并提供了可行的解决方案

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

【讨论】：

感谢分享后续信息。该帖子中的最新评论有效！

【解决方案4】：

在调整窗口大小和/或“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();

}

【讨论】：

【解决方案5】：

在加载颜色框相关的 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);

【讨论】：

非常感谢兄弟。这是 colorbox 的最佳响应式解决方案。只需将上述代码放在 jquery.colorbox.js 文件的末尾即可解决问题。

【解决方案6】：

您应该考虑使用 @media 查询 colorBox css 文件的“框架”，就像您对其余 css 所做的那样。

【讨论】：

我知道你在 10 月份留下了这个答案，但你能澄清一下你所说的框架是什么意思吗？

【解决方案7】：

兄弟们，这个工作正常。

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 );
});

});

访问demo page

【讨论】：

【解决方案8】：

在 jQuery.colorbox.js 文件中进行此更改

第 24 行：-

maxWidth: "100%",

不要进行任何其他更改，所有响应效果都会正常工作:)

【讨论】：

【解决方案9】：

我用 CSS 为 youtube 视频框制作了这个，但请注意，它可能会剪切一些垂直图像。

@media (max-width: 480px) {
#colorbox {
max-height:218px !important;
}
#cboxWrapper *, #cboxWrapper {
height:auto !important;
}
}

【讨论】：

【解决方案10】：

这是对我有用的解决方案，我取出了最初由 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

【讨论】：

【解决方案11】：

这是我在这个问题上使用过的最佳解决方案，即使您使用 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);

【讨论】：

【解决方案12】：

我在Drupal site 上找到的一个解决方案使用了 Colorbox 的 OFF 功能：

if (window.matchMedia) {
    // Establishing media check
    width700Check = window.matchMedia("(max-width: 700px)");
    if (width700Check.matches){
        $.colorbox.remove();
    }
}

您需要在特定窗口大小上重新启动颜色框。

【讨论】：

【解决方案13】：

我的解决方案在网站没有响应并且您希望颜色框在移动设备上可见时会有所帮助。我个人使用它来存储 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);
    }

【讨论】：

【解决方案14】：

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”，它将自动进行计算。它对我有用，所以我要过去了！

【讨论】：

【解决方案15】：

我想在这里添加一个答案。我需要通过尊重不同的断点宽度并根据窗口宽度更改弹出框的宽度来使颜色框响应。基本上，当颜色框显示在浏览器中时，我可以在颜色框的左侧和右侧留有空白，但在手机/平板电脑中显示时则不行。

我使用了这篇文章 (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 提供不同的自定义值对象，以便在需要时加载不同的断点。

【讨论】：

【解决方案16】：

彩盒所有者的回答。

window.addEventListener("orientationchange", function() {
if($('#cboxOverlay').is(':visible'){
    $.colorbox.load(true);
}
}, false);

【讨论】：

colorbox 的所有者从 1.4.5 的公共 API 中删除了 load() 函数，此答案不再有效。继续讨论和可能的解决方案：github.com/jackmoore/colorbox/issues/158