41

レスポンシブ Web サイトでカラーボックスを使用しています。

リクエストがあります: Colorbox が画面/モバイル デバイスのサイズと向きに自動的に調整されることを望みます: 画面/モバイル デバイスの向きを変更した場合 (つまり、モバイルを回転させて、水平方向と垂直方向の画像を調整した場合)画面サイズ、Colorbor が画面の新しいサイズ/向きに自動的に調整されることを望みます)。今のところ、Colorbox は新しい画像 (たとえばスライドショー) のロード時にのみ自動的に調整されます。

非公開のGoogleグループで質問しました：

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

github で 2 つの機能リクエストを作成しました。

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

でも反応がないので、スタックオーバーフローを試してみます...

向きの変更に基づいて ColorBox を自動サイズ変更できるかどうかを知っている人はいますか (回避策としてコールバック関数を使用する可能性があります)。

助けてくれてありがとう。

4

16 に答える 16

37

私はここで多くの解決策を試しましたが、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

于 2014-05-02T15:00:56.603 に答える
10

この問題は議論されており、著者の github で実用的な解決策が提供されているようです

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

于 2012-10-28T02:14:15.413 に答える
3

カラーボックス関連の 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);
于 2016-02-14T14:26:23.497 に答える
3

ウィンドウのサイズ変更および/または「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();

}
于 2013-08-23T08:13:22.793 に答える
2

これは正常に動作している兄弟です。

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

});

デモページにアクセス

于 2015-01-16T07:14:50.860 に答える
2

jQuery.colorbox.js ファイルで、この変更を行うだけです

24行目:-

maxWidth: "100%",

他の変更を加えないでください。すべてのレスポンシブ効果ですべてが正常に機能します:)

于 2015-02-12T06:02:49.333 に答える
2

@media query colorBox css ファイルを使用した「フレーミング」は、残りの css と同じように考慮する必要があります。

于 2012-10-25T17:02:08.290 に答える
1

これは私にとってはうまくいった解決策です.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);

クレジットは次のとおりです。

于 2015-05-14T21:51:11.743 に答える
1

これを youtube ビデオ ボックスの CSS で作成しましたが、垂直方向の画像が切り取られる可能性があることに注意してください。

@media (max-width: 480px) {
#colorbox {
max-height:218px !important;
}
#cboxWrapper *, #cboxWrapper {
height:auto !important;
}
}
于 2015-01-16T18:34:02.510 に答える
0

ここに回答を追加したいと思います。さまざまなブレークポイント幅を尊重し、ウィンドウ幅に基づいてポップオーバーの幅を変更することで、カラーボックスをレスポンシブにする必要がありました。基本的に、ブラウザで表示するときはカラーボックスの左右に空きスペースを設けることができますが、電話/タブレットで表示するときはできません。

この投稿 ( 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提供して、必要に応じて別のブレークポイントでロードすることもできます。

于 2016-11-02T10:57:28.277 に答える
0

カラーボックスの所有者からの回答。

window.addEventListener("orientationchange", function() {
if($('#cboxOverlay').is(':visible'){
    $.colorbox.load(true);
}
}, false);
于 2017-01-06T05:17:47.477 に答える
0

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

左、右、下、上を値「false」のままにしておくと、計算が自動的に行われます。それは私のために働いたので、私は行きます！

于 2016-03-16T16:57:13.420 に答える
0

Drupal サイトで見つけたソリューションでは、Colorbox の OFF 関数を使用しています。

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

特定のウィンドウ サイズでカラーボックスを再度開始する必要があります。

于 2013-03-12T15:31:15.947 に答える
0

私の解決策は、Web サイトが応答せず、カラーボックスをモバイル デバイスで表示したい場合に役立ちます。私は個人的に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);
    }
于 2013-04-18T08:22:35.177 に答える