How to implement a Lightbox functionality (HTML skills required)
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:
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">
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.
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.