Featherlight - very lightweight jQuery lightbox

Featherlight is a very lightweight jQuery lightbox plugin. It's simple yet flexible and easy to use. Featherlight has minimal css and uses no inline styles, everything is name-spaced, it's completely customizable via config object and offers image, ajax and iframe support out of the box. Featherlights small footprint weights about 4kB – in total

• Simple yet flexible
• Image, Ajax, iFrame and custom content support
• Gallery Extension
• Minimal CSS
• Name-spaced CSS and JavaScript
• Responsive
• Customizable via configuration object

1. INCLUDE CSS AND JS FILES

<link href="//rawgithub.com/noelboss/featherlight/master/src/featherlight.min.css" type="text/css" rel="stylesheet" title="Featherlight Styles" />
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//rawgithub.com/noelboss/featherlight/master/src/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

2. HTML

By default, featherlight acts on all elements using the 'data-featherlight' attribute. An element with this attribute triggers the lightbox. The value of the attribute acts as selector for an element that's opened as lightbox.

<a href="#" data-featherlight="#mylightbox">Open element in lightbox</a>
<div id="mylightbox">This div will be opened in a lightbox</div>

Featherlight is smart. 'data-featherlight' can also contain a link to an image, an ajax-url or even DOM code:

<span data-featherlight="myimage.png">Open image in lightbox</a>
<span data-featherlight="myhtml.html .selector">Open ajax content in lightbox</a>
<span data-featherlight="<p>Fancy DOM Lightbox!</p>">Open some DOM in lightbox</span>

it also works with links using href and the "image" and "ajax" keywords (this can also be manually set with the configuration options like {image: 'photo.jpg} or {type: 'image'}):

<a href="myimage.png" data-featherlight="image">Open image in lightbox</a>
<a href="myhtml.html .selector" data-featherlight="ajax">Open ajax content in lightbox</a>
<a href="#" data-featherlight-ajax="myhtml.html .selector">Open ajax content in lightbox</a>
<a href="#" data-featherlight="myhtml.html .selector" data-featherlight-type="ajax">Open ajax content in lightbox</a>

By default, Featherlight initializes all elements matching defaults.selector on document ready. If you want to prevent this, set $.featherlight.defaults.autostart to false before the DOM is ready.

3. JAVASCRIPT

Bind Featherlight

$('.myElement').featherlight($content, configuration);

It will then look for the targetAttr (by default "data-featherlight") on this element and use its value to find the content that will be opened as lightbox when you click on the element.

configuration – Object: Object to configure certain aspects of the plugin. 

$content – jQuery Object or String: You can manually pass a jQuery object or a string to be opened in the ligthbox.

Manual calling of Featherlight

$.featherlight($content, configuration);

In cases where you don't want an Element to act as Trigger you can call Featherlight manually. You can use this for example in an ajax callback to display the response data.

$content – jQuery Object or String: You can manually pass a jQuery object or a string to be opened in the ligthbox.

configuration – Object: Object to configure certain aspects of the plugin.

4. OPTIONS

Featherlight comes with a bunch of configuration-options which make it very flexible. These options can be passed when calling featherlight. Alternatively, they can specified as attribute on the elements triggering the lightbox; for example, <a data-featherlight-close-on-esc="false" ...> has the same effect as passing{closeOnEsc: false}. You can also modify the $.featherlight.defaults directly which holds all the defaults

/* you can access and overwrite all defaults using $.featherlight.defaults */
defaults: {
    namespace:    'featherlight',         /* Name of the events and css class prefix */
    targetAttr:   'data-featherlight',    /* Attribute of the triggered element that contains the selector to the lightbox content */
    variant:      null,                   /* Class that will be added to change look of the lightbox */
    resetCss:     false,                  /* Reset all css */
    background:   null,                   /* Custom DOM for the background, wrapper and the closebutton */
    openTrigger:  'click',                /* Event that triggers the lightbox */
    closeTrigger: 'click',                /* Event that triggers the closing of the lightbox */
    filter:       null,                   /* Selector to filter events. Think $(...).on('click', filter, eventHandler) */
    openSpeed:    250,                    /* Duration of opening animation */
    closeSpeed:   250,                    /* Duration of closing animation */
    closeOnClick: 'background',           /* Close lightbox on click ('background', 'anywhere', or false) */
    closeOnEsc:   true,                   /* Close lightbox when pressing esc */
    closeIcon:    '✕',             /* Close icon */
    otherClose:   null,                   /* Selector for alternate close buttons (e.g. "a.close") */
    beforeOpen:   $.noop,                 /* Called before open. can return false to prevent opening of lightbox. Gets event as parameter, this contains all data */
    beforeClose:  $.noop,                 /* Called before close. can return false to prevent opening of lightbox. Gets event as parameter, this contains all data */
    afterOpen:    $.noop,                 /* Called after open. Gets event as parameter, this contains all data */
    afterClose:   $.noop,                 /* Called after close. Gets event as parameter, this contains all data */
    type:         null,                   /* Specify content type. If unset, it will check for the targetAttrs value. */
    contentFilters: ['jquery', 'image', 'html', 'ajax', 'text'] /* List of content filters to use to determine the content */
    jquery/image/html/ajax/text: undefined     /* Specify content type and data */
}

5. METHODS

$.featherlight is actually a constructor with $.featherlight.methods as a prototype and all the configuration options as attributes.

It's possible to use or change these methods, but the API isn't guaranteed to remain constant; enquire if you have particular needs.

var current = $.featherlight.current()
current.close();
// do something else
current.open(); // reopen it