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:
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:
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: