web-dev-qa-db-ja.com

jQuery Colorboxプラグインのサイズを動的に変更するにはどうすればよいですか？

Colorboxに読み込まれたAJAXコンテンツには、コンテンツ内の物のサイズを変更するJavaScriptが含まれています。Colorboxは、すべてのAJAX 。コンテンツのロード後にColorboxのサイズを変更するにはどうすればよいですか？

これは、誰かがロードされた後に再びcolorbox（）を呼び出すことができると言ったリンクですが、それを行う方法がわかりません：

http://groups.google.com/group/colorbox/browse_thread/thread/535d21c69e9006b

jquerycolorbox
31
James Skidmore

Colorbox 1.3では、サイズ変更関数を呼び出すことができます。

$('.item').colorbox.resize();
29
James Skidmore

言いたいカラーボックスのサイズを動的に変更するには。

colorbox.resize({width:"300px" , height:"300px"})

Iframeを読み込むカラーボックスのサイズを変更する場合は、ターゲットドキュメントのヘッドに次のようなものを追加します。

$(document).ready(function(){
    var x = $('mydiv').width();
    var y = $('mydiv').height();

    parent.$.colorbox.resize({width:x, height:y});

});
42
user573434

カラーボックスを呼び出すとき、それにonComplete関数を追加するだけです。例えば

$('.mycolorboxes').colorbox({    
  onComplete : function() { 
       $(this).colorbox.resize(); 
  }    
});

したがって、カラーボックス内にコンテンツがロードされるたびに、サイズ変更機能が開始されます。

20
Jason

setTimeoutメソッドを使用してサイズ変更を行う必要がありました。
写真を取得するためにajax呼び出しを行い、2秒待ってからこの写真のカラーボックスを設定します。
完了時に、画像サイズでカラーボックスのサイズを変更します。

画像が完全にロードされず、画像のサイズとしてwidth = 0、height =が取得されたため、タイムアウトなしでは機能しませんでした。

$.get('/component/picture/getPicture.do?pictureId=' + id, 
       function(data) {  //callback function
           $('#pictureColorbox').html(data);  //set picture inside div on this page
           setTimeout(function(){  // set timeout 2 sec
               //create colorbox for inline content "#pictureColorbox" and call showPicture on complete
               $.colorbox({href:"#pictureColorbox", inline:true,  title:'', initialWidth:900, initialHeight:600,  scrolling:false, onComplete: function(){showPicture(id);}});
           }, 2000); 
       });

function showPicture(id) {
    var x = $('#' + id + " #picture").width();
    var y = $('#' + id + " #picture").height();
    $.colorbox.resize({innerWidth:x, innerHeight:y});
}
5
Svetlana

resizeは実際にはjQueryオブジェクトを受け取り、それを使用してサイズ変更を行います。代わりに、次のようにカラーボックスをリロードさせることができます。

$(window).resize(function(){
    $.fn.colorbox.load();
});
3
Chris

iframeで開くページにこのコードを置くだけです：

$(document).ready(function() {
    parent.$.fn.colorbox.resize({
        innerWidth: $(document).width(),
        innerHeight: $(document).height()
    });
});
3
Rafael Caviquioli

私が知っているように、_iframe: true_を含むカラーボックスはサイズ変更できません。 _iframe: false_の色は、高さのみを変更できます（jQuery.fn.colorbox.resize()を使用）。

2
Mayur bhalgama

実装が非常に簡単な別の解決策があります（ただし、呼び出しているすべてのカラーボックスで機能するため、状況によっては最適ではない場合があります）。これがうまくいく場合は、基本的にコードのどこにでもコードをドラッグアンドドロップするだけで、自動的に機能します。 HEIGHT_PERCENTAGEとWIDTH_PERCENTAGEの値は、ウィンドウ全体のサイズに対してウィンドウのサイズを変更する大きさを設定できるようにするためのものです。他の値を追加して、最小サイズなどを作成できます。

    $(function() {
        $(window).bind('resize', function() {

            var HEIGHT_PERCENTAGE = .60; // '1' would set the height to 100%
            var h = "innerHeight" in window 
               ? window.innerHeight
               : document.documentElement.offsetHeight; 
            h *= HEIGHT_PERCENTAGE;

            var WIDTH_PERCENTAGE = .40; // '1' would set the width to 100%
            var w = "innerHeight" in window 
               ? window.innerWidth
               : document.documentElement.offsetWidth;
            w *= WIDTH_PERCENTAGE;

            $.colorbox.resize({width: w, height: h});
        }).trigger('resize');
    });

この回答の一部は、 https://stackoverflow.com/a/3012772/1963978 から採用されています

1
matthewsheets
$.colorbox.resize()

これは、アクティブなカラーボックスのセレクターを知らない場合にもアクティブなカラーボックスで機能します。

1
Scott

クリスの答えは途中で私を取得しましたが、ウィンドウのサイズが変更されるたびにその関数を呼び出し、さらに奇妙なことにポストバックを引き起こすいくつかのasp.netボタンでもIE7/8で大きなエラーを引き起こしました！？！アクティブなカラーボックスがない場合でも。

これはそれを解決するようです：

    $(window).resize(function(){
               if ($('#colorbox').length) {
     if( $('#colorbox').is(':hidden') ) {                    
          }
         else {
           $.fn.colorbox.load();
         }
       }
    });

.lengthを使用して#colorboxが存在することを確認し、それが非表示ではないことを確認します。Fireboxで見られるように、カラーボックスを閉じると完全に削除/破壊されないというトリックがあります。

お役に立てれば..

0
Markive
$(window).resize(function(){    
        $.colorbox.resize({
            maxWidth:"auto",
            width:95+'%',
        });
});
0
Dishan TD

それが提供するコールバック関数で呼び出すことができます：

$(".single").colorbox({}, function(){
     alert('Howdy, this is an example callback.');
});
0
Vladislav Rastrusny

これは兄弟がきちんと働いています。

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 );
}); 
});
0
Anthony Carbon

これは、iframeのコンテンツの高さ/幅を検出できる場合に実行できます。その後、colorbox.resize（）関数を使用して、カラーボックスのサイズを再度変更できます。

0
XuDing

さて、私はこれまでColorboxを使用したことはありませんが、似たようなものを使用しました。正しく理解できれば、何かをロードした後にボックスのスタイルを変更する必要があります。

Colorboxにどのid/class値が適用されているかを見つけたら、AJAXコンテンツがロードされると、関数が呼び出されて、適切な部分のスタイルを変更しますカラーボックス。

0
Eugene Bulkin

あなたが何を探しているのか分かりませんが、私自身の解決策の探求中にこのスレッドを見つけました。 iframeモードのカラーボックスがあります。そこにはボタンがあり、クリックすると現在のカラーボックスを新しいカラーボックスに置き換える必要があります。私はこれをするだけです...

parent.$.colorbox({
    href: newurl,
    iframe: true,
    width: "600px",
    height: "240px",
    onClosed: function() {
    }
});

これにより、同じ場所にある新しいカラーボックスに新しいページが再ロードされ、移行が非常にスムーズになります。

0
Doug Wolfgram