Fancybox

Question

我有几个内容块在 Fancybox 中打开。这一切都按预期工作，但几个盒子的内容非常小，并不能真正保证 1000 像素宽度的 Fancybox 覆盖。有没有办法将这些框的宽度设置为其他值？

我试过给内容框添加一个宽度（#login-overlay），但是 Fancybox 只是忽略了这个，因为它是围绕内容构建的，一旦相关 link 被点击打开覆盖。

这是我的 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") 编写整个脚本块的想法？

编辑我实际上在 Fancybox 页面上找到了一个示例，它使用 data-fancybox-width 设置覆盖层的宽度：http://jsfiddle.net/wgPTR/

尽管这似乎不适用于我的代码。宽度设置但不再响应。将 fitToView 设置为 false 似乎可以正常工作，但是当没有足够的垂直 space 并且它不可滚动时，fancybox 会裁剪。

更新

只是为了更新，这里是工作（默认）fancybox 的 CodePen：http://codepen.io/moy/pen/YGgjqv

我还创建了一个分叉版本，它使用 data-fancybox-width 设置宽度 - 这有效，但不幸的是 fancybox 不再响应。让它工作的唯一方法是取出 fitToView: false 这会破坏我的垂直滚动。

有什么想法吗？

Answer 1

我似乎找到了一个解决方案（在 CSS 技巧论坛的大量帮助下），方法是使用以下 beforeLoad if 语句：

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

基本上它会检查 class fancybox--small，如果它存在，它会修改 fancybox 的 maxWidth。

（目前）看不出有任何问题，在 IE 中检查它似乎也适用于 IE8。希望这对其他人有帮助，但如果您发现任何问题，请告诉我 ;)

Fancybox - 为不同的覆盖设置宽度

Fancybox - set widths for different overlays

javascript

css

jquery

fancybox-2