Featherlight is a very lightweight jQuery lightbox.
Featherlight is very, very, very lightweight. Everything together weights less than 3.7kB and only counts about 150 lines of JavaScript code. To get started, simply add the "data-featherlight" attribute with a selector, an image- or an ajax-url. It's that simple.
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.
Don't be fooled by Featherlights small footprint! Featherlight is very flexible and surprisingly smart. It's responsive, supports images, ajax and iframes out of the box and thanks to a range of configuration options, you can adapt it to your needs. Without rewriting anything.
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.
It's easy to override the styling of Featherligh. 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 });
With little code, you can build lightboxes that use custom content loaded with ajax...