jQuery Facebox: setting the width

I’ve been looking at the jQuery Facebox plugin recently which is a Facebook style lightbox for loading remote content, images, local content etc. In this post I look at how to change the width of the Facebox dialog with CSS or programatically using Javascript.

Download Facebox

Download the Facebox plugin and associated files from http://defunkt.io/facebox/
Download jQuery from http://jquery.com/
See my basic example for using Facebox.

The dialog should size itself automatically

When the remote content, image etc is loaded into the Facebox, it should resize the width automatically if the content is wider than the Facebox. However it will still initially show at the default width and then resize so it can be nicer to set the width yourself.

I’ve also had one reader comment that the dialog didn’t resize and he was left with horizontal scrollbars. By setting the width manually it resolves this issue.

Modifying the width with CSS

The #facebox container has a div within it with the class .body – the simplest way with CSS to change the width of the Facebox is to change this width to the desired width. If the remote content being loaded is ideally 600px wide, then add this CSS rule:

#facebox .body {
    width: 600px;
}

You can either overwrite the value in the Facebox CSS file or ideally add the rule to your own style sheet. If it’s in your own style sheet, and the facebox.css file is loaded after your own style sheet in the HTML then the rules in facebox.css will override your settings, so add !important to ensure your rule is the one used like so:

#facebox .body {
    width: 600px !important;
}

See my "using !important with CSS" post for more details about the !important flag.

Modifying the width with Javascript

There are a couple of hooks/triggers Facebox calls before and after the dialog is displayed and you could set the width programatically depending on the content when those are triggered.

"beforeReveal" is called before it’s displayed and the content is loaded into the dialog and "afterReveal" after it’s loaded and the box displayed, so where you set it will depend on whether or not you know the width before you have the content.

To set it to 600px wide beforeReveal:

$(document).bind('beforeReveal.facebox', function() {
    $('#facebox .body').width('600px');
});

To set it to 600px wide afterReveal:

$(document).bind('afterReveal.facebox', function() {
    $('#facebox .body').width('600px');
});

Setting it to the full width of the browser

I’ve posted a follow up article which shows how to make the Facebox the full width of the browser’s window using Javascript.