Question

我在响应式网站中使用彩盒。

我有一个请求：我希望Colorbox自动调整屏幕/移动设备的大小和方向：如果我改变屏幕/移动设备的方向（即如果我旋转我的手机以调整水平和垂直图片到屏幕尺寸，我希望Colorbor自动调整到屏幕的新尺寸/方向）。目前，Colorbox仅在新图片的加载时自动调整（例如以幻灯片形式显示）。

我在封闭的谷歌小组中提出了这个问题：

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

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

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

但我没有任何回应，所以我尝试Stack Overflow ...

有没有人知道是否可以让ColorBox自动调整大小方向改变（可能在变通方法中使用回调函数）？

提前感谢您的帮助。

Answer 1

我在彩盒初始化时使用 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 。

Answer 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

Answer 3

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

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

Answer 4

在窗口调整大小和/或“orientationchange”上调用此方法其中960是我的colorbox的首选宽度，而我的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();

}

Answer 5

您应该考虑使用@media查询colorBox css文件'框架'，就像使用其他css一样。

Answer 6

这个兄弟正在努力工作。

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

Answer 7

我已经在CSS中为youtube视频框制作了这个，但请注意，它可以剪切一些垂直图像。

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

Answer 8

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

第24行： -

maxWidth: "100%",

不要进行任何其他更改，所有响应效果都能正常工作：）

Answer 9

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

Answer 10

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

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

Answer 12

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

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

您需要在某个窗口大小上重新启动colorbox。

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

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

Answer 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提供不同的自定义值对象，以便在需要时加载不同的断点。

Answer 16

来自colorbox所有者的回答。

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

如何使彩色盒响应

16 个答案: