Contact!

How to create a lightbox using jQuery and Featherlight

Whatever theme I’m building, whether for WordPress, Drupal or bespoke, I’ve almost always needed to create lightboxes. When I use third party resources I like them to be lightweight, customisable and fast, so when I’m using jQuery I use Featherlight.

Featherlight is relatively simple to use but offers many great features. I’m going to show you how to make image and modal lightboxes.

Note: make sure to include the featherlight.js and featherlight.css on your page.

Image lightbox

To create an image lightbox it is as simple as wrapping it within an <a> tag and using the data-featherlight attribute to point at the location of the image file.

<a href="#" data-featherlight="path/to/image.png"><img src="path/to/image.png" alt="an image to lightbox"></a>

Gav's Blog Logo

Click the logo above to checkout the lightbox. All styling is Featherlight default and unmodified.

Modal lightbox

With Featherlight you aren’t just limited to image lightboxes. Because Featherlight acts on all elements using the data-featherlight attribute we can also use it to create modals.

<a href="#" data-featherlight="#modal-example">Show me!</a>
<div id="modal-example" class="modal">Now I can fill my div with lots of cool modal stuff</div>

Featherlight will look for the <div> using the id passed through data-featherlight. Show me!

To get this to work properly you will need to add a modal style to your css stylesheet. This can’t be set inline.

.modal { 
    display: none; 
}

Extending the Featherlight prototype

Featherlight is created as an object. By targetting the constructor $.featherlight we can change and extend the behaviour of Featherlight. I like to use this to add captions to my image lightbox.

In this example we want to modify .afterContent. To achieve this we use the following.

$.featherlight.prototype.afterContent = function () {

}

Next we are going to pass our captions. We are going to take this from the $currentTarget and, in this example, we will use the title attribute.

var caption = this.$currentTarget.find('img').attr('title');

Now that we have our caption we are going to make sure that there isn’t a caption currently set and then add a new one.

this.$instance.find('.caption').remove();
$('<div class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content'));

Your final code should look something like below.

$.featherlight.prototype.afterContent = function () {
    var caption = this.$currentTarget.find('img').attr('title');
    this.$instance.find('.caption').remove();
    $('<div class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content'));
}

Gav's Blog Logo

Click the image above to see an image lightbox with captions. To get the caption to display all you have to do is populate the title attribute of the image.

Note: for more Featherlight tricks, please read the usage docs.

  1. Andrew says:

    I love featherlight for the same reasons you said in your post. Simple but extendable and very lightweight (less than 15k for the minfied JS and CSS combined).

    Thanks for the very useful tutorial on how to extend the prototype to add captions. It was really easy to follow – I had to tweak slightly because I wanted the caption in a data attribute instead of title attribute, but this was easy to do.

Join the discussion!

You might like:

Create, register and use shortcodes in WordPress

Create, register and use shortcodes in WordPress

by Gav 18/03/2023

Learn how to create and register your own WordPress shortcodes to add dynamic content to your posts and pages.

How to use guard clauses in JavaScript

How to/why use guard clauses in JavaScript

by Gav 16/03/2023

Learn how to improve code readability and performance by using guard clauses in JavaScript. Discover their benefits and best practices.

Implements and Extends, Object Oriented TypeScript

Implements and Extends, Object Oriented TypeScript

by Gav 15/03/2023

Learn the difference between implements and extends in TypeScript. Use Implements to implement interfaces and types, and extends to inherit from classes.

Reading/Parsing and Writing YAML files in PHP, Symfony

Reading/Parsing and Writing YAML files, PHP Symfony

by Gav 14/03/2023

In this tutorial we will look at using YAML in PHP. Learn about Parsing and Writing YAML files using Symfony's YAML component.

Measuring code execution performance in JavaScript

Measuring code execution performance in JavaScript

by Gav 13/03/2023

Measuring code execution performance is an important way to identify bottlenecks. Use these methods in JavaScript to help optimise your code.

Measuring script/code execution time in PHP using microtime

Measuring script/code execution time in PHP, microtime

by Gav 06/03/2023

Find bottlenecks, optimise and clean your code, and speed up your apps by measuring the execution time of your PHP scripts using microtime.

Regenerate WordPress media image sizes, programmatically

Regenerate WordPress media image sizes, programmatically

by Gav 25/02/2021

Learn how to regenerate and update WordPress media and image sizes both programmatically (without plugin), and also with a handy plugin.

Magic Constants in PHP. What they are and how to use them.

Magic Constants in PHP. What they are and how to use them

by Gav 15/02/2021

Ever seen constants like __DIR__ and __FILE__ being used in PHP? These are 'Magic Constants', and this is how we can use them.

Detecting Keypress JavaScript

Detect single and multiple keypress events: JavaScript

by Gav 16/10/2019

Learn how to use event listeners to detect and handle single and multiple keypress events in JavaScript. Add modifier keys to your application!