Lean Lightbox for WordPress

The main reason for poor web performance is always the number and size of the assets you stream down the pipe. A simple UI interaction like opening a link to an image in a good looking overlay should not require hundreds of kilobytes of CSS, JS and images. Another reason for poor web performance is slow response time. The more code that needs to execute on the server, the slower the response. Again, something as simple as opening an image in an overlay should not require any database calls and heavy processing on the server side.

A quick (or long) search on the WordPress Plugin Directory for a lightbox plugin will leave any decent developer depressed because they’ll realize that nothing of value exists and that they’ll have to code it themselves. Hopefully this plugin will save you some time. If it doesn’t fit your needs out of the box, you can easily customize it or at least get a few valuable resources for your custom implementation.

Quick-start

Demo:
https://imgix.github.io/luminous/

Zip archive:
https://github.com/andrejcremoznik/lean-lightbox/archive/master.zip (extract to your plugins directory)

Developer documentation:
https://github.com/andrejcremoznik/lean-lightbox

How it Works

The lightbox itself is powered by Imgix’s Luminous. It’s probably the smallest lightbox in existence with less than 5 KB of JS and CSS. Luminous works for images; it doesn’t support videos or other randomness.

Lean Lightbox injects Luminos JS and CSS from a CDN after all other scripts have been printed inside the wp_footer(). This ensures the code runs as late as possible and doesn’t block.

After Luminous is loaded, a query for all links that point to JPGs and PNGs runs and instantiates a Luminous or LuminousGallery instance, depending on whether it’s an independent link to an image or part of a collection in a gallery.

Configuration

There is no configuration. If you need to, you can tweak the query in the source here:
https://github.com/andrejcremoznik/lean-lightbox/blob/master/lean-lightbox.php#L34

If you’re developing a custom theme, consider bundling Luminous with your app’s code to avoid a couple of HTTP requests. The documentation is very straightforward: https://github.com/imgix/luminous#installation

Why is this not in the WordPress Plugin Directory?

This plugin breaks a rule that will get it rejected so I won’t event try to get it in. Details explained here.