2012-03-29 7 views
6

私は私の人生のために、私が使用するFancybox 2の位置を変えることができる方法を見つけ出すことはできませんleft: 47px;top: 147pxポジションFancybox 2手動

私は、ソースコードを読んで、それをハッキングすることなく、私は表示されませんポジショニングをオーバーライドする方法。

autoCenterをfalseに設定すると、最初に時間後に自動センタリングが停止するだけです。

jQueryを使用してCSSを変更したり、CSSを適用するカスタムラッパーを指定すると、Fancyboxは常にすべての試行を上書きするインラインCSSを追加するため、機能しません。

Fancyboxに測位自体を停止し、絶対的測位を使用するよう指示する方法はありますか?

+0

「helpers:」オプションが不十分であると考えられます。私は正確なコードを見つけることができれば答えとして投稿します。 – Sparky

+0

私は何も見つかりません。私はあなたがしたいことは、プラグインのソースコードを編集しないで、オプションであるとは思わない。もしあなたがそれをやろうとするならば、追加の位置決めオプションを追加するだけで、少なくともプラグインはスケーラブルなままです。 – Sparky

答えて

12

!important修飾子を使用してoverride inline CSSスタイルを使用できます。 Fancyboxのために

は、以下のJavaScriptの位置を上書きする場合に使用します。

.fancybox-wrap { 
    top: 147px !important; 
    left: 47px !important; 
} 
+1

Fancybox 2がjQueryのcss()を使用してインラインCSSによって上書きされます。 – bafromca

+0

これは奇妙です。'重要な'は 'css()'で設定されたスタイルを含め、インラインスタイルをオーバーライドする必要があります - http://jsfiddle.net/YKhEG/ - おそらく '#fancybox-wrap'が間違ったセレクタですか? – leepowers

+0

それはそれです:それは.fancybox-wrapです。あなたは正しいです、それは私が必要なすべてです。ありがとうございました! – bafromca

0

あなたはそうのようなCSSを変更することができませんか? は明らかに「上」と「左」

$("a.fancybox1").fancybox({ 
'hideOnContentClick': false, 
     'onComplete' : function() { 
      $("#fancybox-wrap").css('margin', 'auto'); 
     } 
    }); 
6

に余裕のプロパティを変更し、私はbeforeShow-ハンドラに手動で新しいCSSクラスを追加することで、この問題を解決しました。私はfancybox2を使いました。

CSS:

.fancybox-wrap22 { 
    top: 22% !important; 
} 

JS:私はあなたがfancyboxコアはすべて#1 fancyboxラップのスタイルプロパティを編集している原因と、そのようにCSSを変更することはできません推測

$(".open_fancybox").click(function() { 
    $.fancybox.open('<h1>lorem ipsum</h1>', { 
    beforeShow : function() { 
     $('.fancybox-wrap').addClass('fancybox-wrap22'); 
    } 
    }); 
    return false; 
}); 
0

時間。したがって、私の例で説明したように、新しいクラスを追加する必要があります。そうしないと、visuellの変更は表示されません。

0

私は同様の問題があります。手動でファンシーボックスを配置したいのですが、自動的に再センタリングを続けます。

私はセンター機能を無効にし、それを解決:

$.fancybox.center = function(){}; 
1

私はfancybox2のため、この解決策を見つけました。デフォルトの_getPositionメソッドをオーバーライドして、1つ以上のディメンションが変更されないようにすることができます。

// Disable vertical repositioning 
var orig = $.fancybox._getPosition; 
$.extend($.fancybox, { 
    _getPosition: function(onlyAbsolute) { 
     var rez = orig(onlyAbsolute); 
     delete rez.top; 
     return rez; 
    } 
}); 
+0

これは素晴らしい解決策です。トリガ要素の上にfancyboxを配置し、20pxで右にわずかにオフセットする方法はありますか?あなたのコード例で 'onlyAbsolute'とは何を意味していますか? –

0

ルーカステイシェイラが正しくありました!これは私のために働いた。最初にセンター機能をオフにし、onCompleteイベントを使用してインラインCSSを設定します。

<script> 
     jQuery(document).ready(function() { 

      //turn off center function 
      $.fancybox.center = function() { }; 

      //use onComplete event to modify inline css 
      $("#ModalPopup").fancybox({ 
       'modal': true, 
       'onComplete': function() { 
        $("#fancybox-wrap").css({ 'left': '250px', 'top': '150px' }); 
       } 
      }); 

     }); 
    </script>