user1406440 user1406440 - 9 months ago 67
CSS Question

Fancybox - set widths for different overlays

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?

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.

Here's my javascript:

$(document).ready(function() {
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>'

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

Any ideas that don't involve writing a whole need block of script for

I actually found an example on the Fancybox page which uses
to set the width of an overlay:

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


Just to update, here's a CodePen of the working (default) fancybox:

I've also created a forked version which uses
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
fitToView: false
which breaks my vertical scrolling.

Any ideas?

Answer Source

I seem to have found a solution (with a lot of help from the CSS Tricks forum) by using the following beforeLoad if statement:

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

Basically it checks for the class fancybox--small and if it's present it amends the maxWidth of the fancybox.

Can't see any problems with it (yet), checking in IE it seems to work down to IE8 as well. Hopefully this helps someone else but let me know if you find any issues with it ;)