Neambo homepage
Contact UsMarketplace

Lightbox

This core component allows you to add image, video, audio, and URL popups. Link to your file and add the lightbox class to that link.

The advantage of using a lightbox instead of embedding large images or videos directly on the page is that the content is not downloaded until the user clicks the link — which helps with page speed.

Live Examples

Watch a quick YouTube video to see it in action.

Examples

Any element with an href attribute pointing to a supported file and the lightbox class will trigger the lightbox — though anchor tags are recommended. Supported formats include images, MP4, MP3, YouTube, Vimeo, and URLs.

Image

MP4

To stop the player from looping indefinitely, add the noloop class.

Please note:

This is the browser's native player, so it may look slightly different depending on the browser.

MP3

To stop the player from looping indefinitely, add the noloop class.

Please note:

This is the browser's native player, so it may look slightly different depending on the browser.

YouTube

Vimeo

URL

Please note:

Some URLs may not work if the domain restricts embedding via X-Frame-Options headers.

Group lightbox images into a gallery by adding a shared class to your links:

lightbox-yourgalleryname

Replace yourgalleryname with your gallery name. No spaces or special characters allowed. All image links sharing the same lightbox lightbox-yourgalleryname classes will be grouped into that gallery.

Here is an example — all image links that should be part of the gallery have these classes:

Please note:

The gallery feature only works for images. Videos, URLs, and other formats are not supported.

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 the data-caption attribute with a bit of JavaScript in the onclick field:

Copy and paste the code below, then 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.