10

Colorbox は、レスポンシブ デザインに「そのまま」適しているようです。デフォルトの寸法設定をパーセンテージで上書きし、最大値を設定して、巨大な画面で手に負えないようにしています。

$.colorbox.settings.width = "92%";
$.colorbox.settings.height = "90%";
$.colorbox.settings.maxHeight = 850;
$.colorbox.settings.maxWidth = 1200;

それはうまくいきます。また、cboxTitle 要素のサイズをその上の img の幅と正確に一致するように調整しているため、長いキャプションが常に適切に配置されます。

$(document).bind('cbox_complete', function(){
    var photoWidth = $(".cboxPhoto").innerWidth();
    var photoContainer = $("#cboxContent").outerWidth();
    var leftPix = (photoContainer - photoWidth) / 2;    
    $("#cboxTitle").css({'left' : leftPix, 'width' : photoWidth});
});

これもうまくいくようです。ウィンドウのサイズ変更イベントの処理という恐ろしい部分が残ります。私は次のことを試しています

$(window).on("resize", function(){
    $.fn.colorbox.resize({
        height: "90%",
        width: "92%"
    });
});

(実際には、Webkit でのサイズ変更イベントのストリームを抑制するために、標準の jquery のサイズ変更の代わりにカスタムのdebouncedresizeイベントを使用していますが、関連性がないため、その部分は省略しています。また、繰り返しています。それ以外の場合はサイズ変更が行われないため、サイズ変更オプションの幅と高さのパーセンテージ値は同じです。:( )

この最後の部分はまったく機能していません。私は問題を分解しようとします：

1) ユーザーがカラーボックスを標準のデストップ サイズでロードし、ビューポートをより狭くスケーリングすると、cboxPhoto要素の高さが正しくスケーリングされません。幅は正しく縮小されていますが、高さは同じままで、「スクイーズ」が作成されています。height:autoということで、CSSに追加してみましたcboxPhoto。これでアスペクト比が復元されますが、cboxPhoto要素が大きすぎて切り取られています。以前はモーダル内にスクロールバーが表示されませんでした。写真は、カラーボックスを閉じて、新しいブラウザー ビューポート幅で再度開いた場合のサイズではありません。

2) の CSScboxTitleは再計算されていません。cbox_completeカラーボックスのサイズ変更機能は、イベントをトリガーするようには見えません。そうじゃない？

これらの問題を解決したいのですが、プラグインの現在の状態を考えると、おそらくこのユースケースに対処する最も簡単な方法は、ウィンドウのサイズが変更されたときにカラーボックス全体を閉じてリロードすることだと思いますが、元に戻りますサイズ変更イベントの前にユーザーが見ていたのとまったく同じギャラリー内のコンテンツ。しかし、私はそれをどのようにコーディングするかについてはかなり不明です。助けてくれてありがとう！

PS 皆さん、ウィンドウのサイズを変更するのはデザイナーだけだという議論はやめてください。申し訳ありませんが、私はそれを購入しません。見事な写真が画面に表示されると、人々は拡大し、特にタブレットは常に回転します...

4

3 に答える 3

1

そのような場合は使用$.resizeしないようにします。CSS Media Queriesそれがレスポンシブデザインに力を与えていると思います。では、メディア クエリを使用しない理由はありません。

実際に試したことはありませんが、要素のインラインcolorboxが挿入されると思います。$.colorbox.settings.width = "92%";CSS

それらの設定を削除します。カラーボックス要素のインライン CSS を禁止します。次に、CSS を使用してwidth、heightより大きなデスクトップの初期スケーリングを行います。

Media Queriesウィンドウのサイズ変更時にモーダルサイズを拡大するために使用します。

#colorbox{
   height: 90%;
   width: 92%;
}

@media (max-width: 992px) { 
   #colorbox{
       height: 90%;
       width: 92%;
   }
}

複数のクエリも完全に合法です。そのため、モーダル サイズをさらに小さいサイズに設定できます。

@media (max-width: 430px) { 
   #colorbox{
       height: 96%;
       width: 98%;
   }
}

pxの代わりに使用することもできます%が、この場合、カラーボックスのモーダルの幅/高さは、あるサイズから別のサイズに移動するときに少しジャンプします。ただし、この場合、CSS のtransitionプロパティを使用してサイズ変更プロセスをよりスムーズにすることができます。

于 2014-02-14T09:20:41.540 に答える
0

次のようなことを試したことがありますか。

    if($('#colorbox').length && $('#colorbox').css('display') != 'none') { 
        setTimeout(function(){
                $.colorbox.resize({
                    width: '100%',
                    height: '80%'
                });
            }, 1500);
    }

「.fn」なしで、少し遅れて試してみてください...

于 2012-08-12T21:03:46.590 に答える
0

サイズ変更時にカラーボックス ウィンドウの CSS の高さと幅を簡単に設定できますか?

$(window).on("resize", function(){
    //check if colorbox is open. This 'if' is from stackoverflow, I haven't tested
    if($('#colorbox').length && $('#colorbox').css('display') != 'none') {
        //replace colorboxID with the correct ID colorbox uses
        document.getElementById('coloboxID').style.width='92%';
        document.getElementById('coloboxID').style.height='90%';
    }
});
于 2013-06-26T16:33:01.453 に答える