Fancybox - 異なるオーバーレイの幅を設定する

Question

私はファンシーボックスで開いているいくつかのコンテンツブロックを持っています。これはすべて意味するように動作しますが、2つのボックスの内容は非常に小さく、1000px幅のFancyboxオーバーレイを実際に保証するものではありません。これらのボックスの幅を別のものに設定する方法はありますか？

コンテンツボックス（＃login-overlay）に幅を追加しようとしましたが、Fancyboxは相対リンクがクリックされてオーバーレイを開くとコンテンツの周囲に構築されるため、これを無視します。

はここに私のjavascriptです：

$(document).ready(function() { 
    $(".fancybox").fancybox({ 
     margin: [20,20,20,20], 
     padding: [20,20,0,20], 
     openEffect: 'fade', 
     openEasing: 'easeInQuad', 
     openSpeed: 400, 
     title: false, 
     //closeBtn: false, 
     //autoCenter: false, 
     scrolling : 'no', // turns off scrolling in box. 
     fitToView : false, // allows box to overflow out of viewport. 
     autoSize: false, // needs to be turned off for width/maxWidth to work. 
     height: 'auto',  // if autoSize is set to 'false', this needs to be 'auto' so height matches content. 
     width: '100%', 
     maxWidth: 960, 
     helpers: { 
      overlay: { 
       // locked: false, // Prevents jump to top of window when opening a fancybox. 
       showEarly : false 
      } 
     }, 
     tpl: { 
      closeBtn : '<a title="Close" class="fancybox-item fancybox-close icon-circle-cross" href="javascript:;"><span>Close</span></a>' 
     } 
    }); 
}); 

あなたは私がデフォルトサイズの幅を参照してくださいmaxWidthを使用している見ることができるように。私は箱のカップルはほぼ半分になることができます。私はautoを設定しようとしましたが、CSSのコンテンツブロックに設定された幅を継承するかどうかを確認しますが、これは動作していないようです。

$(".fancybox-narrow")の全体のスクリプトブロックが必要ですか？

EDIT 私は実際には、オーバーレイの幅を設定するdata-fancybox-widthを使用してFancyboxページの例を見つけました：これは私のコードで動作するようには思えないけどhttp://jsfiddle.net/wgPTR/

。幅は設定されますが、それはもはや応答しません。 fitToViewからfalseに設定すると、それはうまくいくように見えますが、十分な垂直スペースがなく、スクロールできないときには、fancyboxが作物を作ってしまいます。

UPDATE

だけで更新するには、ここでの作業のCodePen（デフォルト）fancyboxです：http://codepen.io/moy/pen/YGgjqv

私は幅を設定するdata-fancybox-widthを使用してフォークバージョンも作成しました - しかし、作品残念ながら、fancyboxはもはや応答性がありません。これを有効にする唯一の方法は、垂直スクロールを壊すfitToView: falseを取り出すことです。

アイデア？

Answer 1

私は文の場合は、次のbeforeLoadを使用して（CSSトリックフォーラムから多くの援助で）解決策を見つけたように見える：

beforeLoad: function() { 
    if ($(this.element).hasClass('fancybox--small')) { 
     this.maxWidth = 600; 
    } 
} 

基本的には、クラスfancybox--smallのために、それはそれ存在だかどうかをチェックしますfancyboxのmaxWidthを修正します。

まだ問題は見当たりませんが、IEをチェックするとIE8でも問題ないようです。うまくいけば、これは他の誰かに役立ちますが、問題が見つかった場合は教えてください;）