Featherlight – The ultra slim jQuery lightbox.
Featherlight is a very lightweight jQuery lightbox.
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[1].
To get started, simply add the "data-featherlight" with a selector, an image or an ajax-url. It's that simple.[2]
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[3].
Battle tested
Featherlight works on IE8+, all modern browsers and on mobile platforms.
Featherlight has an extensive test suite[4].
Featherlight runs on hundreds of thousands of websites. That we know of.
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[5] 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[6], you can build lightboxes that use custom content loaded with ajax...
References
- ^ you can adapt it to your needs (github.com)
- ^ It's that simple. (github.com)
- ^ gallery extension
- ^ test suite (travis-ci.org)
- ^ featherlight.css (github.com)
- ^ little code (github.com)
Add Comment
Other Items in webdev
Other Categories in Linx
