Adding Lighbox Popups Inline via HTML

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.

Important – You must load the Lightbox Scripts!

The lightbox scripts are only loaded on demand 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 load the scripts globally via Appearance > Customize > General Theme Options > Lightbox > Load Scripts Globally.

Single 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

Total has built-in support for modern dialog windows now! So we recommend you instead check out the new guide on Adding Modal Dialogs using HTML.

<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 (aka gallery)

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".