Changelog

  • 1.2.3 - Changed jQuery to 1.8.3 (1.9+ will break because of $.browser)
  • 1.2.1 - Added packetmonkey's code to recognize Content-type headers sent by the server
  • 1.2 - Added support for Internet Explorer
    • transparent pngs
    • overlay css fix
    • faster facybox.close
    • fixed .w and .e width
  • 1.2 - $.fn.fixPNG added to jQuery, you can use in other pngs with: $(".yourclass").fixPNG()
  • 1.1 - Stripped img urls from facybox.css to facybox_urls.css (the last is imported)
  • 1.1 - Image gallery
  • 1.1 - Facybox centralizes vertically if content height is smaller then window height

What is it?

A jQuery-based, Facebook/Fancybox-style lightbox which can display images, divs, or entire remote pages.

It's simple to use and easy on the eyes. Clone it from github, view the examples below, then start enjoying the shadows.

Why another lightbox? And so similar to Facebox or Fancybox?

FamSpam's facebox is great, but the visual is too facebookish (well that's the way they wanted it). Fancybox is great, but programmatically dealing with it is hard (you have to create an element on the fly and trigger a click on it).

So, instead of using one or another, a mashup was created. Basically is a facebox with fancybox look.

Download

Requires jQuery >= 1.2+. Important: 1.9+ will break facybox. Wait for a new version.

You'll need a loading image, close label, four corners, and solid border images in addition to the javascript and css files. All are included in the package.

Download facybox from github.com

Want to live on the edge?

Help!

Need help? Check out the Wiki.

Images

View escalator_by_mickeyxmouse.jpg (from Deviantart) in the facybox

The Code

<a href="http://th..yxmouse.jpg" rel="facybox">View escalator_by_mickeyxmouse.jpg</a>

Galleries

open gallery you can navigate by left-arrow/right-arrow too

The Code

jQuery('#open_gallery').click(function(){
  jQuery.facybox({images:['demo/logo-facybox.png','images/coffee_48x48.png']})
});

Divs

View the 'info' div in the facybox

The Code

<a href="#info" rel="facybox">View the 'info' div in the facybox</a>

Ajaxes

View 'remote.html' in the facybox

This one is a PHP file with a 5 seconds delay (to view the loading image)

The Code

<a href="demo/remote.html" rel="facybox">View 'remote.html' in the facybox</a>

On Page Load, Programmatically

You can load any arbitrary html, or any other content with a few lines of code:

The Code to load html

<script type="text/javascript">
    $(function(){
        $.facybox("<h3>This is a title</h3><p>and this is a text</p>");
    })
</script>

To load a remote page:

<script type="text/javascript" charset="utf-8">
    $(function(){
        $.ajax({
            url: "demo/remote.html",
            success: function(data){
                $.facybox(data);
            }
        });
    })
</script>

To load a gallery:

<script type="text/javascript" charset="utf-8">
    $(function(){
        jQuery.facybox({images:['demo/logo-facybox.png','http://th03.deviantart.net/fs50/300W/f/2009/257/d/6/Lost_room_by_fogke.jpg']})
    })
</script>

Load Dependencies

Make sure jQuery is loaded before facybox.

<!-- This gets the latest jQ 1.x from google, minified and gziped -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<link href="facybox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="facybox.js" type="text/javascript"></script>

Important: You don't need to reference facybox_urls.css, but the file must be at the same place as facybox.css

Attach It onLoad

While calling facybox() on any anchor tag will do the trick, it's easier to give your facyboxed links a rel="facybox" and hit them all onLoad.

jQuery(document).ready(function($) {
  $('a[rel*=facybox]').facybox()
})

Extra Classes

You can give the facybox container an extra class (to fine-tune the display of reusable remote pages) with the facybox[.class] rel syntax.

Maybe your Terms and Conditions can be loaded standalone or via facybox. When loaded in facybox, you might want to tweak some styles -- like making the h1 positioned absolutely?

View an an example which makes the remote.html page bigger and bolder using css.

The Code

<a href="demo/remote.html" rel="facybox.bolder">text</a>

Controlling facybox Programmatically

It's possible to attain a higher level control over facybox by calling methods directly. The following will open the facybox and insert the passed string into it:

Arbitrary Text

jQuery.facybox('something cool');
jQuery.facybox('something cool', 'my-groovy-style');

Remote files

jQuery.facybox({ ajax: 'demo/remote.html' });
jQuery.facybox({ ajax: 'demo/remote.html' }, 'my-groovy-style');

Image

jQuery.facybox({ image: 'demo/stairs.jpg' });
jQuery.facybox({ image: 'demo/stairs.jpg' }, 'my-groovy-style');

A Page Element

jQuery.facybox({ div: '#box' });
jQuery.facybox({ div: '#box' }, 'my-groovy-style');

If you plan to fill the facybox with the result of an Ajax call, you'll want the loading graphic displayed whilst your asynchronus task runs. This is the automatic behavior if the facybox() method is passed a function.

Loading Image Displayed

jQuery.facybox(function() {
  jQuery.get('code.js', function(data) {
    jQuery.facybox('<textarea>' + data + '</textarea>')
  })
})

Some extra demos

Some cool pictures from Deviant.com:

Thanks & Contact

Thanks to Facebook for the idea and style. Thanks to Mindy Tchieu for her help in getting this working.

from mWolff: Thanks to defunkt for Facebox and janis.skarnelis for Fancybox.

Comments, concerns, complaints, criticisms, confessions? Email me: