Facebox 1.3 Introduction

Posted September 30th, 2011 in Javascript

I've used the jQuery Facebox plugin a lot in the past for showing AJAX content in a lightbox but have recently moved to using Colorbox. There are a lot of posts on this blog about Facebox 1.2 but the current version is 1.3 so I thought I'd better take a look at see what improvements have been made. This will be the beginning of a series over a few weeks looking at Facebox 1.3 and also some other jQuery lightboxes and the pros and cons of each.

Download Facebox

Facebox is available from http://defunkt.io/facebox/ and the github repository at https://github.com/defunkt/facebox

The 1.3 release you can download contains a bug relating to the setting of the close image whose path is hard coded into the HTML popup in the Javascript source. So if you want to store Facebox in a location other than /facebox you're going to generate 404 errors.

To fix this issue, download the latest master - from the github page click "Downloads" then the "Download .tar.gz" button and not the v1.3 package. Once they release a new version you can just download the package as usual.

Facebox 1.3 Basic Example

I've posted up a separate HTML page with a working Facebox 1.3 for you to try out. View the source on that page to see how it works. It's all very straight forward.

Note that you can change the paths for the close label and loading image with the settings (which is shown in the example page source) and the paths for these files need to be either absolute or relative to the current document.

Browser Support

v1.3 uses CSS alpha transparency for backgrounds, opacity, box shadows and border radius to achieve a nice designed lightbox without relying on images (other than for the loading image and close button). For this reason, older versions of IE don't work as well but all the other browsers work well.

• IE6, not supported - it's just a mess
• IE7 and 8 - it works but there's no border at all
• IE9 looks good
• FF 3.0 has no borders but otherwise is OK (still has rounded corners)
• FF 3.5+ looks good
• Chrome looks good
• Safari 4+ is supported, I can only test in 5.1 and it looks good
• Opera 11.10 looks good, I haven't checked in any other versions
• I haven't checked on mobile browsers

In a couple of upcoming posts I'll post up screenshots of the default style in various browsers, and then some simple CSS fixes which add borders to IE7 and IE8 etc.