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:
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.
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.
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:
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
<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
You can just copy/paste the code and replace the text:
this.setAttribute('data-caption', 'This is the caption!')