Fancybox - set widths for different overlays
<p>I have a several blocks of content which open in a Fancybox. This all works as it's meant to but the contents of a couple of the boxes is quite small and doesn't really warrant a 1000px width Fancybox overlay. Is there a way to set the widths of these boxes to something else?</p>

<p>I've tried added a width to the content box (#login-overlay) for example but Fancybox just ignores this as it is built around the content once the relative link has been clicked which opens the overlay.</p>

<p>Here's my javascript:</p>

<pre><code>$(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 : '&lt;a title="Close" class="fancybox-item fancybox-close icon-circle-cross" href="javascript:;"&gt;&lt;span&gt;Close&lt;/span&gt;&lt;/a&gt;'
        }
    });
});
</code></pre>

<p>As you can see I'm using <code>maxWidth</code> to see the width of the default size. I couple of boxes could be almost half that. I've tried setting <code>auto</code> so see if it would inherit the width set on the content block in the CSS but this doesn't seem to work.</p>

<p>Any ideas that don't involve writing a whole need block of script for <code>$(".fancybox-narrow")</code>?</p>

<p><strong>EDIT</strong>
I actually found an example on the Fancybox page which uses <code>data-fancybox-width</code> to set the width of an overlay: <a href="http://jsfiddle.net/wgPTR/" rel="nofollow">http://jsfiddle.net/wgPTR/</a></p>

<p>Though this doesn't seem to work with my code. The width sets but it isn't responsive anymore. Setting <code>fitToView</code> to <code>false</code> seems to get that working but then the fancybox crops when there's not enough vertical space and it's un-scrollable.</p>

<p><strong>UPDATE</strong></p>

<p>Just to update, here's a CodePen of the working (default) fancybox: <a href="http://codepen.io/moy/pen/YGgjqv" rel="nofollow">http://codepen.io/moy/pen/YGgjqv</a></p>

<p>I've also created a forked version which uses <code>data-fancybox-width</code> to set a width - which works but unfortunately the fancybox is no longer responsive. The only way to get this to work is to take out <code>fitToView: false</code> which breaks my vertical scrolling.</p>

<p>Any ideas?</p>