Fancybox - ширина набора для разных накладок

Question

У меня есть несколько блоков контента, которые открываются в Fancybox. Все это работает так, как будто это необходимо, но содержимое нескольких коробок довольно мало и на самом деле не гарантирует наложение Fancybox шириной 1000 пикселей. Есть ли способ установить ширину этих полей для чего-то еще?

Я попытался добавить ширину к окну содержимого (# 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 Я на самом деле нашел пример на странице FancyBox, которая использует data-fancybox-width установить ширину накладки: http://jsfiddle.net/wgPTR/

Хотя это, кажется, не работает с моим кодом. Ширина устанавливается, но она больше не реагирует. Установка fitToView на false кажется, что это работает, но затем придает фантазии поля, когда не хватает вертикального пространства, и это невозможно прокрутить.

UPDATE

Просто обновить, вот CodePen рабочего (по умолчанию) FancyBox: http://codepen.io/moy/pen/YGgjqv

Я также создал раздвоенный версию, которая использует data-fancybox-width установить ширину - который работает, но к сожалению, fancybox больше не реагирует. Единственный способ заставить это работать - вынуть fitToView: false, который разбивает мою вертикальную прокрутку.

Любые идеи?

Answer 1

Я, кажется, нашел решение (с большим количеством помощи форума CSS Tricks) с помощью следующей beforeLoad если заявление:

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

В основном он проверяет для класса fancybox--small и если это настоящее изменяет maxWidth fancybox.

Невозможно увидеть какие-либо проблемы с этим (пока), проверяя IE, похоже, что он работает и с IE8. Надеюсь, это поможет кому-то еще, но сообщите мне, если вы найдете какие-либо проблемы с ним;)