Lightbox

This core component allows you to add image, video, audio, and URL popups. You can do so by linking to your file and adding the lightbox class to that link.

Here is a live example and a quick demo:

Examples
Gallery
Caption

Examples

Image

MP4

If you want the video to stop looping indefinitely, you can also add this class: noloop. Available since Version 24.

Note: This is the browser's default video player, so it may look different depending on the browser.

MP3

If you want the MP3 to stop looping indefinitely, you can also add this class: noloop. Available since Version 24.

Note: This is the browser's default audio player, so it may look different depending on the browser.

YouTube

Vimeo

URL

Note: Generally, this only works for URLs on the same domain as your page (e.g., another page on your website). It won't work with sites that don't allow content to be embedded into other sites, using X-Frame-Options server configurations.

So basically, you can open a lightbox with any link that points to an image, mp4, mp3, YouTube, Vimeo, or same-domain URL, where you can add the lightbox class. In fact, any element that has a href attribute pointing to a supported file and the lightbox class, but links (anchors) are recommended.

Gallery

Additionally, you can add a common class to your links with this format lightbox-yourgalleryname to group your lightbox images in a gallery.

Please keep in mind this only works for images, so it doesn't work for videos, URLs, etc.

Replace yourgalleryname with your gallery name. No white space or special characters are allowed. All links pointing to an image with the same lightbox lightbox-yourgalleryname will be included in that gallery.

Here is an example — all image links we want as part of our gallery have these classes:

Caption

If you have access to the code of your link (e.g., in a Rich text source code), you can add a caption to your lightbox item using a data-caption attribute:

<a href="https://f.hubspotusercontent20.net/hubfs/273774/act3/images/sample-0yp8r.jpg" class="lightbox" data-caption="This is the caption">Open Lightbox Image</a>

For other links (e.g. card links, button links, etc), you can set this data-caption attribute with a bit of JavaScript in the onclick field included with Version 10 on all Act3 module links:

You can just copy/paste the code and replace the text:

this.setAttribute('data-caption', 'This is the caption!')

Important note: This is just a workaround, taking advantage of the onclick field, so it only works for single images, not galleries. Please consider using a Gallery module instead, which contains Caption fields.