How to use "JavaScript lightbox" in blog page with Zola?

I’d like to insert a “JavaScript lightbox” into my blog page. For example:

How do I do it?

It should be inserting some code into the template file to recognize it in the .md content text. The problem is it’ll be part of the entire content text. That means, the lightbox image can be anywhere within the text of the blog content.

Please give me some pointers! Thanks!

It looks like if you use the build tool on the website, you can generate a single js file that you can simply add to the static directory in your project. You should then be able to do the same with the css file that it links you to.

It doesn’t seem Iike this is the solution.

The problem is the image is within the “content” section the blog page.

Well, you can add html to markdown directly, but it would probably be better to make a shortcode.

I wasn’t even sure what a lightbox was until I searched it.

This one looks pretty nice: