Lightbox any Gutenberg image with Lity

I wanted an easy way to lightbox any image I added to my tutorials or snippets without having to rely on a different block or remembering to add a specific class.

I had a look at the Javascript lightbox options out there and Lity looked like the lightest and easiest option.

The best part…. It relies on 1 line of code!


Loading Lity

First we need to the enqueue the Lity.js and Lity.css files.

You can do this via CDN or loading them locally



If you are using advanced scripts you can copy everything in both files and paste into seperate snippets.

Otherwise, you can use Sridhars My Custom Functionality plugin.

Initialising Lity

Next, we need to add a Javascript click event.

jQuery(document).on('click', '.wp-block-image:not(.no-lightbox) img', lity);

The selector we have used here is .wp-block-image > img which targets all images that are added via Gutenberg. As well as combining this with the :not selector which allows to exclude any elements that have the class .no-lightbox. This means if you have an image you don’t want lightboxed then it will not be triggered.


To add the nice zoom cursor hover effect:

.wp-block-image:hover:not(.no-lightbox){ cursor: zoom-in; }


Looking to lightbox anything? Including videos (YouTube, Vimeo), google maps or URL.
I wrote a quick shortcode that allows you to do that.

function tct_lightbox($atts){ return '<div class="lightbox"><a href="'.$atts['target'].'" data-lity>'. $atts['text'].'</a></div>'; } add_shortcode( 'lightbox', 'tct_lightbox' );


[lightbox target="" text="Click Me"]


Lity website –
Lity Github –
:not Selector –

👋🏻 Weekly Tutorial Digest

I send out a weekly newsletter with links to new tutorials written in the last week, you can subscribe below.

🔒I won't send you spam, I promise