Jquery - Fancybox - 背景ページシフト問題

Question

Fancyboxがうまく読み込んでいますが、すべてが開きますが、問題はバックグラウンドで発生します。ページ全体が右に8ピクセルだけ正確に移動しているボックスがロードされてボックスクローズ時に通常の位置に戻るとき。

当社のファイアウォールの背後にあるデベロッパーサーバー上にあるため、サイトにリンクすることはできません。

私は次のスクリプトを使用しています：Fancybox、Quform、Jquery Banner Rotator fancybox呼び出しが回転子の内部で発生しています。私はオリジナルのjquery fancybox CSSの幅/高さを変更していません。

ボディ幅を100％に設定し、余白をautoに設定し、内部divを最小幅1138pxに設定し、余白をautoに設定しました。

問題を解決するにはどこに連絡したらよいですか？

Answer 1

私は最近同じ問題を抱えていました。 fancybox CSSで.fancybox-lockを見つけて、それを次のように変更してください：

.fancybox-lock { 
    overflow: hidden; 
    margin: 0 !important; 
    } 

Voila！ ：D

Answer 2

私は最近Fancybox v2と非常によく似た状況にありました。私の最初のページには折りたたみの下にコンテンツがあったため、スクロールバーがありました（おそらくOPも同様でした。 Fancyboxリンクを起動すると、ページ本体に同じシフトが発生し、スクロールバーがクリアされました。 Fancyboxの画像を閉じると、本体が元に戻ってスクロールバーが再び有効になりました。

.fancybox-lockの調整が私のために動作しませんでしたが、私のFancyboxオブジェクトをインスタンス化するとき、次のオプションを何を含めたでした

helpers: { 
    overlay: { 
     locked: false 
    } 
} 

唯一の注意点は、これがページの中央にあなたのFancyboxをロックしないであなたがスクロールしていれば、つまりFancyboxビューのページは完全にスクロール可能です。私にとっては、それは2つの悪のうちの小さいものでした。

Answer 3

バージョン2.1.3では、jquery.fancybox.jsの行1802-1807（以下）をコメントアウトします。

if (!this.overlay) { 

this.margin = D.height() > W.height() || $('body').css('overflow-y') === 'scroll' ? $('body').css('margin-right') : false; 

this.el  = document.all && !document.querySelector ? $('html') : $('body'); 

this.create(opts); 

} 

Answer 4

Iは身体の背景画像を中心に、固定とfancybox v.2.1.4を使用し、常に表示するように垂直スクロールバーを強制。スクロールバーの表示を強制したにも関わらず

body{ 
    background: url('../img/sfondo.jpg') fixed center top; 
    overflow-y: scroll; 
} 

、私は、マック上のFirefox（ライオンのスクロールバーは、ページ内のスペースを取らないので、ChromeとSafariはOKだった）とIEで背景画像のずれの問題がありましたff、windows上のクロム。

だから、私は手動でのxオフセット代わりにbackgroundプロパティの世界センターのを設定した場合に気づい問題がを行って、私はのHEADにjqueryのの少しでそれを管理していましたページ：

<script> 
    function centerTheBackground(){ 
     var pageWidth = $(window).width(); 
     var imageWidth = 1920; //set here the width of the background image 
     var xOffset = (imageWidth/2) - (pageWidth/2); 
     jQuery('body').css('background-position', '-' + xOffset + "px top"); 
    } 


    jQuery(function($){ 
     centerTheBackground(); 
    }); 


    $(window).resize(function() { 
     centerTheBackground(); //re-center the background image during window resizing 
    });    
</script> 

Answer 5

私は「margin-right：auto！important」を自分のbody要素に追加するだけで解決しました。これはFancyboxes自身のmargin-right：0です。

Answer 6

それは既知の問題ですが、ここであなたはより多くを見つけることができます。issues, fancyapps @ GitHub

私はfancybox2（バージョン2.1.5）を使用しています。 （ライン165から始まる）オーバーレイhelper'-セクションと2つのルール変更：

.fancybox-lock { 
/* overflow: hidden !important;*/ 
    overflow-x: hidden !important; 
    overflow-y: scroll !important; 
    width: auto; 
} 

を： は、私は少し '

を検索jquery.fancybox.css'-file' を変更することで問題を解決してきました

と二番目のルール：

.fancybox-lock .fancybox-overlay { 
/* overflow: auto; 
    overflow-y: scroll;*/ 
    overflow: hidden !important; 
} 

ページがオーバーレイの後ろにスクロール可能であるが、これは、（私見）十分に正常に動作します。

少なくとも「シフト右」効果が抑制されます。

「right：0;」で配置された要素は後で発見されました。垂直スクロールバーの幅だけ左にシフトされました。

これは、headcy要素内にスタイルノードを追加することによって、fancybox.js-codeによってmargin-rightが設定されているためです。

問題を解決するには、使用しているコードに応じて、jquery.fancybox.jsファイルまたはjquery.fancybox-2.1.5-pack.jsファイル内の1行のコードを変更するだけです。

はアンパックバージョンのライン2017年：

$("<style type='text/css'>.fancybox-margin{margin-right:" + (w2 - w1) + "px;}</style>").appendTo("head"); 

// change it to 

$("<style type='text/css'>.fancybox-margin{margin-right: 0;}</style>").appendTo("head"); 

// perhaps comment out the complete line, I haven't testet it though 

または.packファイル（EOLニアライン46）で：

/* [much more code before] */ f("<style type='text/css'>.fancybox-margin{margin-right:"+(d-a)+"px;}</style>").appendTo("head")})})(window,document,jQuery); 

// change it to: 

/* [much more code before] */ f("<style type='text/css'>.fancybox-margin{margin-right:0;}</style>").appendTo("head")})})(window,document,jQuery); 

// or try to remove the "f().appendTo()"-part completely (untested) 

Answer 7

まあ、私はちょうどfancyboxのCSSに以下の行をコメント

/*.fancybox-lock { 
    overflow: hidden; 
} 
*/ 

そして、それは上で正常に動作するために開始しました：

• fancyBox - jQueryのプラグイン
• 版：私のために働いた

  $(".fancybox").fancybox({ 
      helpers : { 
       overlay : { 
        locked : false 
       } 
      } 
  }); 
  

  ：2.1.4（木、2013年1月10日）

Answer 8

あなたはロック機能を無効にすることができます。これは私のためにそれをやった

Answer 9

...

.fancybox-lock { 
     overflow: hidden !important; 
     padding-right: 17px; 
} 

.fancybox-lock body { 
    overflow: hidden !important; 
} 

Answer 10

あなたはスクロールバーのためにその問題に直面しています！スクロールバーの幅をトレースし、その幅を '.fancybox-lock'の 'margin-right'として使用してください。私も一度その問題を持っていたので、例えば 、

.fancybox-lock{ 
     margin-right: [your calculated width] !important; 
} 

これは、確かにあなたの問題を解決します。

Answer 11

Fancyboxが開くときにジャンプする要素が固定されている場合は、.fancybox-lockクラスに含まれているCSSの要素にpadding-right：17pxを単純に追加します。

Answer 12

私の主なラッパーは絶対位置だったので、私はファンシーボックス3を使用していて、同じ問題を抱えていました。

ラッパーが正しくないことを確認してください。