To open up as many uses as possible, in some of OxyExtras components you’ll find a ‘manual’ or ‘custom’ setting that allows you to take advantage of the provided functionality outside of the pre-configured options.

With the lightbox component, it can be found within the lightbox content dropdown. It’s ‘manual’ because you’re no longer specifying the content from within the lightbox settings, it’s done manually from the links on the page using the ‘href’ attribute.

In other words, the lightbox will find the links and use the href attribute to determine the content to display. The link could be to an image, a youtube video, a URL to another page, a link to a PDF file etc etc.

When to use Manual Mode

There are many situations where the links that you wish to use as the click triggers to pop open the lightbox don’t exist as Oxygen components. Instead, they are inside existing structures or inside of other components.

For example;

  • Inside of an Easy Posts loop
  • Inside of a carousel when displaying a gallery
  • Inside the post content in Gutenberg blocks.
  • From custom code inside of a code block
  • Markup from plugins using shortcodes.

In these examples, we may have control over the markup of the links but we have no way to wrap the lightbox around them like we would with a typical Oxygen element that we’re wishing to use as the click trigger.

How to use Manual Mode

With manual mode, the only things we need is to know is the selector for the links and the type of content we are trying to display.

Here is a common example;

Adding a Lightbox to a Gallery Carousel

With the carousel builder, we’re often building by placing elements inside of the carousel, so we can usually place a lightbox inside without issue.

The exception to this rule is when adding galleries. In this case, we just set up where the gallery is coming from and the carousel will automatically output the images for us.

There is a setting for add links to these image, for the purpose of being able to use with the lightbox component.

Now the carousel gallery images will be wrapped in links.

In order to add a lightbox to these links, we can place a lightbox component anywhere on the page (ideally just underneath if you like to keep things organised) and set to manual.

The class for the links in the gallery, which can be found by inspecting the page, is ‘oxy-carousel-builder_gallery-image’. We’ll give our carousel a class as well, to make it unique from any other carousels we may have on the page ‘my-carousel’.

Now we can add our link selector in the lightbox settings to make sure it targets just these links. The full selector would be ‘.my-carousel .oxy-carousel-builder_gallery-image’.

That’s it. Now when these links are clicked, it will load up the lightbox with the images.

It would be the same workflow for links inside of an Easy Posts or a code block. You can give the links any class you want, and then use that class as the link selector to tell the lightbox which links to look out for.

Here’s another example;

Adding a Lightbox to the Products List Component

In the Oxygen Woocommerce addon, we can loop through the products using the Products List component. It’s a convenient component for quickly building product grids, but unlike the repeater, we don’t have direct access to the individual elements inside the component.

So.. if we wanted to add a lightbox to show some content from the product page, for eg, this is where the manual mode could be helpful.

The Products Lis component already has links to the product page wrapped around both the product image and the product title. Clicking these would usually take the user to the product page.

We could use either of those links to be the click triggers so that instead of taking the user to the actual product page, the lightbox would be loaded up instead showing the product info or whichever part of the page we want.

We can find the selector for the link easily by using Chrome dev tools. The class that is added to the image link in this case is ‘woocommerce-loop-product__link’.

Let’s use that in a lightbox..

That’s it. Now if the user clicks the image link inside the products list component, it will now open up a lightbox showing the contents of that page (or part of the page, depending how you configure it)

The only difference with this second example is that because the link are pointing to another page, (not an image or video) we just need to use the force content type to tell the lightbox whether we want to use AJAX or iFrame as the method for fetching the content.

Keep up to date with new tutorials, information on new features & example use cases.