Custom Lightboxes

  • lightbox-trigger
  • lightbox-content

Usage

  1. Add lightbox-trigger to the Module’s CSS Classes Box. For example, a button module.
  2. Add lightbox-content to the Section’s CSS Classes box, Row’s CSS Classes box, or Module’s CSS Classes box.

For Multiple Lightboxes on the same page

  • lightbox-trigger-<value>
  • lightbox-content-<value>

You can replace <value> with anything. The trigger will find the content that has the same value.

Note: The lightbox content must be on the page in order to appear in the lightbox. It will be hidden until triggered.

Examples

Trigger the Lightbox with any link

Example:

<a href=”#” class=”lightbox-trigger”>Click Here</a>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat… read more…

This is an example of using an image as a lightbox trigger.

To modify the color of the Close (X) icon in the lightbox, add and modify the following CSS variable:

--close-icon-color:black;

Change the color of the lightbox background by adding this CSS variable to the Main Element CSS of the lightbox-content element:

--overlay-background-color:red;