Featherlight - ultra slim jQuery lightbox

Featherlight is a very lightweight jQuery lightbox plugin. For more information and demos, visit the official website.

• Simple yet flexible
• Image, Ajax, iFrame and custom content support
• Gallery Extension
• Minimal CSS
• Name-spaced CSS and JavaScript
• Responsive
• Accessible
• Customizable via javascript or attributes

» Download Current Release 1.7.14

Here you'll find a list of all the changes and you can also download old releases or the master including all the latest bling.

Installation

All styling is done using CSS so you'll want to include the Featherlight CSS in your head.

<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />

Be aware that Featherlight uses very unspecific CSS selectors to help you overwrite every aspect. This means in turn, that if you're not following a modularized approach to write CSS (which you should! It's terrific!) and have many global and specific definitions (read ID's and such – which you shouldn't), these definitions can break the Featherlight styling.

Featherlight requires jQuery version 1.7.0 or higher (regular version, not the slim one). It's recommended to include the javascript at the bottom of the page before the closing </body> tag.

<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

Usage

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:

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

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 $.featherlight.autoBind on document ready. If you want to prevent this, set $.featherlight.autoBind to false before the DOM is ready.

Bind Featherlight

You can bind the Featherlight events on any element using the following code:

$('.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.

$content – jQuery Object or String: You can manually pass a jQuery object or a string (see content filters) to be opened in the lightbox. Optional

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

Manual calling of Featherlight

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.

$.featherlight($content, configuration);

$content – jQuery Object or String: You can manually pass a jQuery object or a string (see content filters) to be opened in the lightbox. Optional

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

Configuration

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) */
	root:           'body',                /* A selector specifying where to append featherlights */
	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 */
	loading:        '',                    /* Content to show while initial content is loading */
	persist:        false,                 /* If set, the content will persist and will be shown again when opened again. 'shared' is a special value when binding multiple elements for them to share the same content */
	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 */
	beforeContent:  $.noop,                /* Called when content is about to be presented. `this` is the featherlight instance. Gets event as parameter */
	beforeClose:    $.noop,                /* Called before close. can return false to prevent closing of lightbox. `this` is the featherlight instance. Gets event as parameter  */
	afterOpen:      $.noop,                /* Called after open. `this` is the featherlight instance. Gets event as parameter  */
	afterContent:   $.noop,                /* Called after content is ready and has been set. Gets event as parameter, this contains all data */
	afterClose:     $.noop,                /* Called after close. `this` is the featherlight instance. Gets event as parameter  */
	onKeyUp:        $.noop,                /* Called on key up for the frontmost featherlight */
	onResize:       $.noop,                /* Called after new content and when a window is resized */
	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 */
}

================================================

namespace – String:  'featherlight'

All functions bound to elements are namespaced. This is also used to prefix all CSS classes for the background, the content-wrapper and the close button.

================================================

targetAttr – String:  'data-featherlight'

Attribute on the triggering element pointing to the target element or content that will be opened in the lightbox.

================================================

variant – String:  null

Pass your own CSS class to adjust the styling of the lightbox according to your need.

================================================

resetCss – Boolean: false

Set this to true to remove all default css and start from designing scratch.

================================================

openTrigger & closeTrigger – String:  'click'

Events that are used to open or close the lightbox. The close event is bound to the close button and to the lightbox background (if enabled). Has no effect if $.featherlight is called directly.

================================================

filter - String: null

A selector to filter events, when calling featherlight on a jQuery set, in a similar fashion to $(...).on('click', filter, eventHandler).

Attributes both the selector and the filtered element are taken into account.

In the following example, the first link will make an ajax request while the second will display the text "second".

<div data-featherlight data-featherlight-filter="a"
     data-featherlight-type="ajax">