Light box pop up for image on landing page

Occasional Contributor

Hi there i would like to add a lightbox pop up to an image I have on a landing page - basically a click to zoom funtion. Does anyone know of the best way to do this?

 

Kristie 

 

 

2 Replies 2
Regular Contributor

Hello Kristie.
I suggest creating a module. That way you can reuse the following idea (javascript/css/html) in several different places. There's more on creating modules in HubSpot's academy, but here is a link to how to create said "lightbox" from freecodecamp.org:

https://guide.freecodecamp.org/javascript/tutorials/how-to-create-a-lightbox/

In the module, you'd put the html in the html, the css in the css, and the javascript in the javascript. I then recommend replacing the 'src=' value with a HubL snippet (also, more info on that in the academy).

If you can't get that to work, let me know and I will write it for you.

Regular Advisor

As ProGrahamer suggested, a custom module is a good way to go if you're comfortable coding it from scratch. 

 

Otherwise you can always check out the Marketplace for pre-built templates and modules.

 


Stephanie O'Gay Garcia

HubSpot CMS Design & Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!