Nico Morgan Media logo
Featherlight Lightbox Example

Using the Featherlight lightbox with Oxygen Builder

Posted on 18th October 2023 in .  So far there are No comments

This is a really quick and simple guide to using the fabulous Featherlight Lightbox in your Oxygen page designs.

If you don't know Featherlight it is a very lightweight (around 10KB last time I looked) javascript which, when added to your page, enables a simple lightbox which is activated when you click on an image.

For the ultimate in simplicity Featherlight is available as a WordPress plugin and works automatically on any thumbnail which you have set to link to "Media File" in the options.

However, the plugin is loaded on every page of your website, even when it isn't used, which adds overhead to each page load. In this example I am going to explain how to incorporate it in a single page.

This method refers to Oxygen elements but would probably work just as well in in any page builder which allows you to add custom code and HTML attributes.

Adding Featherlight.js to your page using a code box

This isn't a post about creating a gallery in Oxygen, so I will assume that you already have a gallery of some sort on the page, either static or dynamic, using a Repeater. The next step is to connect the page to the Featherlight scripts via their CDN links.

Add a Code Block to your page (I generally move it to the bottom of the page so that any code in doesn't slow the page load) and in the HTML section delete the existing Hello World PHP.

In its place add the following code:

<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>

The only other thing to do is to add some HTML Attributes to the thumbnails which can be clicked on.

This is where it is an advantage to have your thumbnails poduced by a Repeater. You can't use a Repeater to access Media items directly so I generally create a custom post type called Photos, or Gallery Items or similar.

If you have created a static gallery then the next steps will have to applied to each image in the gallery, sorry.

I created my Repeater using the appropriate custom post type in the Custom query section. Mine is a mixture of videos and images:

Screenshot 2023 10 13 at 17.05.55

I then put an image element inside the Repeater's default Div, give it a class of its own and style it as I want.

Assigning attributes to Featherlight Lightbox

The one remaining stage we need to complete for Featherlight to do its stuff is to give this image element those HTML attributes.

Select the image, click on the Advanced tab next to Primary in the sidebar and find the Attributes section at the very bottom.

Add two different attributes:

1. data-featherlight, with value image.
2. data-featherlight-target-attr, with value src.

When you're done it should like this:

Screenshot 2023 10 13 at 17.05.10

Save your page and you are done.

Open the live page and click on your thumbnails and you should get a nice lightbox effect like this:

Keywords: ,
Blog Index

Leave a Reply

Your email address will not be published. Required fields are marked *

Useful Gadgets for Photographers

Affiliate Links

Advert for MPB, quality secondhand camera products

About Nico

I am an equine photographer, website designer and hosting provider living in Lincolnshire.

I work with clients who are sole traders and others which are FTSE companies. They are equally important to me.

If you need commercial photographyeditorial photography, event photography, lifestyle, equestrian or wedding photography, then I can help you, with over 30 years experience in these areas.

I also teach photography. I mentor photographers with a range of experience, from beginners to working professionals and run an equine photography course which gives members access to articles about the business of equestrian photography.

I have a varied set of skills, having worked for well known web design, SEO and analytics companies in parallel to my photography.

I design, host and maintain websites for clients as varied as farms, interior designers and equestrian centres, as well as for bloggers and sportspeople, including many riders.

I am the Public Relations Officer for the Midlands Area Point-to-Point Association, a role which utilises my PR and social media skills to promote horse racing both online and in the National press.

If you think that I could be the right person to help you, whatever your project, then please get in touch and we can discuss what you need and the ways in which I can help.

You can find out more about me here.

cross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram