Use the .lightbox class to make images clickable

[veroandreo]

The .lightbox class allows you to click on images to see a larger version of them. It's much needed, especially for GUI screenshots, when users should be able to see and read what's there 🤓

[cwhite911]

If you want to enable lightbox for all images in the document you can set lightbox: true in the header, so you don't need to add the .lightbox class to each image individually.

---
lightbox: true
---

Also, order of attributes in divs and spans matter to Pandoc. I commented on one instance but in most cases you should move the .lighbox class before any of the attributes like width or fig-align.

From the docs
[This is good]{#id .class key1="val1" key2="val2"}
[This does not work!]{.class key="val" #id}

[veroandreo]

If you want to enable lightbox for all images in the document you can set lightbox: true in the header, so you don't need to add the .lightbox class to each image individually.

---
lightbox: true
---

Also, order of attributes in divs and spans matter to Pandoc. I commented on one instance but in most cases you should move the .lighbox class before any of the attributes like width or fig-align.

From the docs
[This is good]{#id .class key1="val1" key2="val2"}
[This does not work!]{.class key="val" #id}

Ah! When I went through those instructions, I did not understand them. Thanks for explaining! Will update accordingly.