# Featherlight.js The ultra slim lightbox.

Featherlight is a very lightweight jQuery lightbox.

github Download (1.7.13)
Default Custom Styles Image iFrame Ajax
Tweet

#### Lightweight

Featherlight is very, very lightweight. 400 lines of JavaScript, 100 of CSS, less than 6kB combined.

Don't be fooled by Featherlight's small footprint! It's smart, responsive, supports images, ajax and iframes out of the box and you can adapt it to your needs.

To get started, simply add the "data-featherlight" with a selector, an image or an ajax-url. It's that simple.

#### For the Pro

Many lightbox plugins try to handle everything for you. Even the ones called «simple» or «lightweight». Featherlight is different. It's for the pro who knows what he’s doing and just needs a barebones plugin.

Thanks to very low specific css selectors and little code, it's easy to customize and to understand.

It's meant to be extended, like our gallery extension.

#### Battle tested

Featherlight works on IE8+, all modern browsers and on mobile platforms.

Featherlight has an extensive test suite.

Featherlight runs on hundreds of thousands of websites. That we know of.

View Documentation

## Featherlight Default

This is a default featherlight lightbox.
It's flexible in height and width.
Everything that is used to display and style the box can be found in the featherlight.css file which is pretty simple.

## Featherlight with custom styles

It's easy to override the styling of Featherlight. All you need to do is specify an additional class in the data-featherlight-variant of the triggering element. This class will be added and you can then override everything. You can also reset all CSS: $('.special').featherlight({ resetCss: true });

## This Ligthbox was loaded using ajax

With little code, you can build lightboxes that use custom content loaded with ajax...