Marketplace
Important! This documentation is old, and a lot has changed in HubSpot since we released Act version 1. If you are still using Act version 1 we recommend saving these pages for later reference. This documentation will be deleted soon.

How to implement a Lightbox functionality (HTML skills required)

What is Lightbox?

Act Theme doesn't have an image pop-up or Lightbox functionality built-in, however you can implement the external plugin in HubSpot very easily:

1 You just need to add this line (the CSS) in Content > Content Settings > Site Header HTML:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.1/css/lightbox.min.css">

2 And this line (the JavaScript) in Content > Content Settings > Site Footer HTML:

<script src="//cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.1/js/lightbox.min.js"></script>

Note: These assets are hosted on CDNJS, which is "is one of the most famous free and public web front-end CDN services" (source: https://cdnjs.com/about). If you want to download and host them on your own CDN, please make sure you download all files referenced in both the CSS and JS files, upload them, and make sure to change the file paths in the CSS and JS files mentioned above, before uploading them.

3 Then, you can use it like this (from the official lightbox documentation):

Add a data-lightbox attribute to any anchor tag to enable Lightbox. Your anchor should link to an image. For the value of the attribute, use a unique name for each image. For example:

<a href="images/image-1.png" data-lightbox="image-1" data-title="My caption">Image #1</a>

Optional: Add a data-title attribute if you want to display a caption.

If you have a group of related images that you would like to combine into a set, use the same data-lightbox attribute value for all images you want to include in that set, so the visitor can easily browse them with "prev" and "next" arrows. For example:

<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>

Note: We don't provide assistance for external components and plugins. If you have trouble with this implementation or need assistance, please enlist the help of an outside developer or agency.