Adding Lighbox Popups Inline via HTML

Updated: March 20, 2023

The Total theme includes the fancyBox script for the various image and video lightbox features of the theme. It can be used in various builder modules (single image, image grid, portfolio grid, staff grid, blog grid, total button…etc) but it can also be used inline by using specific classes and data attributes in your HTML. Below are some examples:

IMPORTANT: The lightbox scripts are only loaded on demand as needed by theme functions to keep your site fast and slim. If you are adding inline links you can either load the scripts using the [wpex_lightbox_scripts] shortcode or you can add a function to your child theme to load your scripts globally.

Simple Lightbox Image Link:

<a href="LINK_TO_IMAGE" class="wpex-lightbox">link text/html</a>

Video Lightbox:

<a href="LINK_TO_VIDEO" class="wpex-lightbox">link text/html</a>

Or include a custom aspect ratio

<a href="LINK_TO_VIDEO" class="wpex-lightbox" data-ratio="16/9">link text/html</a>

iFrame Lightbox:

<a href="LINK_TO_IFRAME" class="wpex-lightbox" data-type="iframe">link text/html</a>

or include custom widths

<a href="LINK_TO_IFRAME" class="wpex-lightbox" data-type="iframe" data-width="1000" data-height="1000">link text/html</a>

Inline Content Lightbox

<a href="#your-content-id" class="wpex-lightbox" data-type="inline">link text/html</a>

or include custom widths
<a href="#your-content-id" class="wpex-lightbox" data-type="inline" data-width="500" data-height="500">link text/html</a>

Make sure to replace #your-content-id with the ID of the element you want to display in the popup.

Lightbox Group:

For a lightbox group/gallery you need to add the classname "wpex-lightbox-group-item" to the links of all the items you want in the lightbox and then wrap them inside a div with the classname "wpex-lightbox-group".