A lightweight, plug'n'play lightbox plugin for the web, written in about 200 lines of pure vanilla JavaScript.
Minifies to about 3 KB, gzips to a little over 1 KB.
Comes with an optional default stylesheet mimicking Wikipedia's lightbox.
Check out the demo/documentation! It's mobile friendly as well :)
It's a lightbox plugin for the web – when you click a thumbnail, it'll open a fullscreen modal displaying a higher resolution version of it, like this:
| Main page | Lightbox open |
|---|---|
|
|
I needed a small and lightweight lightbox that mimicked Wikipedia's to use in a personal project of mine. I figured it'd be easier to write my own than to figure out what's the best alternative out there that was customizable enough for my needs.
- Very lightweight;
- Very simple to use;
- Progressive enhancement – browsers with no support will just have a regular
<a>linking to the full-res image;
- Figure out if it's acceptably accessible (it probably is! I think)
- Allow for multiple galleries
- Opening things other than images
I estimate it to be the following: Chrome 38+ (Oct.2014), Edge 79+ (Jan.2020), Firefox 98+ (Mar.2022), Opera 25+ (Nov.2014), Safari 15.4+ (Mar.2022)
Due to:
dialog.showModal(): Chrome 37+, Edge 79+, Firefox 98+, Opera 24+, Safari 15.4+for(... of ...): Chrome 38+, Edge 12+, Firefox 13+, Opera 25+, Safari 7+
No, thanks! This is mostly a personal project, fit to my (very) specific needs. If you'd like to add, remove, or change anything, feel free to fork this and build your own personalized version! :)