web-dev-qa-db-ja.com

実行時にFancyboxのサイズを変更するにはどうすればよいですか？

実行時にjQuery Fancyboxのサイズを変更する方法を知っていますか？

ファンシーボックスを初期化するとき、私はこれを行うことができます：

$("tag").fancybox({ 'frameWidth': 500, 'frameHeight': 700 });

私は、fancyboxに動的なコンテンツを入れていますが、コンテンツに応じてサイズを変更したいです。

jqueryresizefancybox
25
Swiftaxe

Fancyboxのバージョン1.3を使用している場合、サイズ変更方法があります：

$ .fancybox.resize（）;

バージョン Fancyboxの2.x の場合、同じことが次のように行われます。

$ .fancybox.update（）

内部のコンテンツのサイズに基づいて、アクティブなファンシーボックスのサイズを変更します。

41
Jason Norris

Alanのソリューションは、サイズを変更した後（少なくとも最新のjqueryおよびfancyboxバージョンでは）ボックスが画面の中央に配置されなくなったため、不完全です。

したがって、完全なソリューションは次のようになります。

$("#fancy_outer").css({'width': '500px', 'height': '500px'});
$("tag").fancybox.scrollBox();
11
dandu

私はあなたにそれを知ってもらいたいだけです。

Javascriptを使用して高さを調整するソリューションを検索した後、私とパートナーは素晴らしい何かに気付きました。

＃fancybox-innerの要素にPADDINGまたはMARGINが設定されているかどうかを確認してください。

これが重要な要素です（＃fancybox-inner margin/padding定義の直接の子。

子要素（＃fancyfox-inner> div> .here）はパディングを持つことができますが、調整することを忘れないでください：

 $('#element').fancybox({
    'onComplete' : function(){
        $.fancybox.resize();
    }
});
4
renoirb

$（ "＃fancybox-wrap"）。width（width）; //または高さなど

$ .fancybox.center（）;

4
tibalt

ほぼ2日間戦った後、オーバーレイの高さを変更することができました。これが役立つことを願っています：

$('#register-link a').fancybox({
    onComplete: function(){
        body_height = $('body').height();
        fancybox_content_height = $('#fancybox-content').height();
        fancybox_overlay_height = fancybox_content_height + 350;
        if(body_height < fancybox_overlay_height ) {
            $('#fancybox-overlay').css('height', fancybox_overlay_height+'px');
        }
    }
});

このコードは、最初にボディの高さ、＃fancybox-contentおよび＃fancybox-overlayを計算します。次に、ボディの高さがオーバーレイの高さより小さいかどうかを確認し、はいの場合は新しい計算された高さをオーバーレイに割り当てます。そうでない場合はデフォルトのボディの高さを取得します

4
Santosh Sonarikar

FancyboxがjQuery UIの一部であった場合、次のようにします。

$("tag").fancybox.option('frameWidth', 500);

しかし、そのようなメソッドを提供していないように見えるため、CSSを直接​​設定する必要があります。

$("#fancy_outer").css({'width': '500px', 'height': '500px'});
3
Alan Plum
function overlay(){
   var outerH = $('#fancybox-outer').height();
   var bodyH  = $(window).height();
   var addH   = 300; //add some bottom margin

   if(outerH>bodyH){
    var newH = outerH + addH;
   }else{
    var newH = bodyH + addH;
   }

   $('#fancybox-overlay').height(newH+'px');

   $.fancybox.center();

}

必要なときにイベントで呼び出す...

... 'onSelect' : function(event,ID,fileObj){

overlay();

}, ...
2
nołname

私の解決策はそのようなものでした（fancybox 1.3.4の場合）：

見つける

$.fancybox.resize = function() {
        if (overlay.is(':visible')) {
            overlay.css('height', $(document).height());
        }


        $.fancybox.center(true);
    };

で置き換える

$.fancybox.resize = function() {
    if (overlay.is(':visible')) {
        overlay.css('height', $(document).height());
    }

    view = _get_viewport();
    var updated_width = view[0];
    if (updated_width > selectedOpts.width) { updated_width = selectedOpts.width; }

    $("#fancybox-wrap, #fancybox-content").css("width", updated_width);        

    $.fancybox.center(true);
};
1
byzanth

$ .fancybox.resize（）;私のために働いていなかったので、私はこのコードをfancybox iframe内のロードされたページに入れました：

$(document).ready(function(){
    parent.$("#fancybox-content").height($(document).height());
});

コールバックで設定することもできます：

$("#mydiv").toggle('fast', function(){
    parent.$("#fancybox-content").height($(document).height());
});
1
Olivier

この方法は私には有効です。 :)

$(".fancybox-wrap.fancybox-desktop.fancybox-type-iframe.fancybox-opened").css({"height": heightToAdjust});
$(".fancybox-inner").css({"height": heightToAdjust});
if ($.fancybox.isOpened) {
   if ($.fancybox.current) {
      $.fancybox.current.height = heightToAdjust;
   }
}
$.fancybox.reposition();
1
vimal prakash

Fancyboxのサイズ変更にも苦労しました。解決策は$.fancybox.reposition();です

魔法のように機能します！

1
meridius

これは私のフォームです：

$("#linkpopup").fancybox({
    'titlePosition'     : 'inside',
    'transitionIn'      : 'none',
    'transitionOut'     : 'elastic',
    'onComplete' : function(){
        $.fancybox.resize();
    }
});
0
Fernando

オンFancybox 3（最新バージョン）

parent.jQuery.fancybox.getInstance().update();

Ref：http://fancyapps.com/fancybox/3/docs/#iframe

0
l2aelba

StackOverflow.comに貢献してくれたすべての人に感謝します。あなたは皆、何度も私に命を救ってきました。今、私はついに何かを寄付することができます。以下は、私が実行時の気まぐれでサイズ変更ファンシーボックスを克服できた方法です。

Href要素固有の属性に、ディメンションPHP varsが渡されます。次に、fancyboxコントロール関数とパラメーターが埋め込まれた、クリックイベントで属性を呼び出して設定します...

<a href="ASSET_ABSOLUTE PATH" class="asset" data-fancybox-type="iframe" assetW="$assetW" 
assetH="$assetH">LINK</a>

$(".asset").click(function(){

    var assetW = $(this).attr('assetW');

    //to display inter-activities..
    $(".asset").fancybox({

    width       : assetW,
    fitToView   : false,
    autoSize    : true,
    closeClick  : false,
    openEffect  : 'none',
    closeEffect : 'none',
       'onComplete' : function(){
         $.fancybox.resize();

      }
  });
});
0
RudyRyu