Display Images & Content in Lightbox using Lity.js

Lity is a lightweight, accessible, and responsive lightbox library that supports images, videos, iframes, and even inline content. The library weighs only about 3K when minified and gzipped on your server.

In this short post, we’ll see how to use it to display content in a popup, i.e., in a Lightbox, using the Lity library on WordPress sites.

What is Lightbox (in a nutshell)?

If you don’t know, a lightbox is a JavaScript library that displays images and videos in the center of the screen while dimming the surrounding area. Here’s a good example to demonstrate – click on the buttons below to see what I mean:

Here’s another example where I’ve integrated the lightbox into a nice image portfolio:

As you can see, you can display any content you want in the lightbox, whether it’s forms, Google Maps (iframes), videos, or any other content you find appropriate.

If you’re wondering how I created this Masonry portfolio, take a look at the post that explains how to create a Masonry image portfolio with loading animations using masonry.js.

Adding Lity Lightbox to WordPress

Using Lity is simple and requires loading only three assets, one of which is jQuery, which is available on every WordPress site. The other two files are lity.min.css and lity.min.js, which you load like this:

function lity_assets() {

    wp_register_style('lity-css', get_stylesheet_directory_uri() . '/css/lity.min.css');
    wp_enqueue_style('lity-css');
    wp_register_script('lity-js', get_stylesheet_directory_uri() . '/js/lity.min.js', array('jquery'));
    wp_enqueue_script('lity-js');

}

add_action('wp_enqueue_scripts', 'lity_assets');

Note that jQuery should be enqueued in your child theme’s functions.php file. Check out what child themes are and how to use them.

How to Use Lity Lightbox for Popups

You can use Lity Lightbox in two ways: declarative (HTML level) and programmatic (JavaScript level).

A. Declarative

In this way, you simply need to add the data-lity attribute to <a> elements, and clicking on these links will open the lightbox accordingly:

<a href="https://farm9.staticflickr.com/8642/16455005578_0fdfc6c3da_b.jpg" data-lity data-lity-desc="Photo of a flower">Image</a>

<a href="#inline" data-lity>Inline</a>

<a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity>iFrame Youtube</a>

<a href="//vimeo.com/1084537" data-lity>iFrame Vimeo</a>

<a href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity>Google Maps</a>;

What’s unusual is the use of Inline Content, i.e., displaying content or an element that exists on the page itself with its corresponding id. For example, I added the following link with the data-lity attribute:

<a href="#inline" data-lity>Inline</a>

All that’s left for me to do is add an element to the page with an id of inline to display it when clicking on that link. For example, I added this form:

<div id="inline" class="lity-hide">
    <form>
        <fieldset>
            <ul>
                <li><label for="input">Input</label>
                    <input type="text" required="" name="name" id="input"/></li>
                <li><label for="textarea" style="width: 100%;">Textarea</label>
                    <textarea id="textarea" rows="10" style="width: 100%;"></textarea></li>
                <li><input type="submit"/></li>
            </ul>
        </fieldset>
    </form>
</div>

By the way, you can also display a different URL in the lightbox than what’s defined in the href attribute of the link using the data-lity-target attribute:

<a href="/image.html" data-lity data-lity-target="/image-preview.jpg">Image</a>

B. Programmatic

// Open a URL in a lightbox
var lightbox = lity('//www.youtube.com/watch?v=XSGBVzeBUbk');

// Bind as an event handler
$(document).on('click', '[data-lightbox]', lity);

You can use the global function lity to open URLs (or HTML) in a lightbox or bind it to any event.

To close the lightbox, you can use the lightbox.close() function.