Add lightbox and mark specific images as no-lightbox

[TheDauntless]

Add lightbox plugin

• Uses https://blueswen.github.io/mkdocs-glightbox
• Custom css class for disabling lightbox: no-lightbox

Marked various images as no-lightbox

• It's on by default, but doesn't make sense for many of the 'website' images
• It will also automatically disable itself if the image is a link

[Copilot]

Pull Request Overview

This PR integrates the MkDocs glightbox plugin and selectively disables lightbox behavior on certain images.

• Adds mkdocs-glightbox to the Python requirements and configures it in mkdocs.yml.
• Marks specific <img> elements with class="no-lightbox" to skip the lightbox effect.

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
weaknesses/index.md	Add no-lightbox class to the overview image
src/scripts/requirements.txt	Add mkdocs-glightbox==0.4.0 to dependencies
mkdocs.yml	Enable glightbox plugin and configure skip_classes
docs/index.md	Disable lightbox on site logo and partner logos
docs/donate.md	Disable lightbox on donors image
docs/contact.md	Disable lightbox on profile and logo images
docs/checklists/index.md	Disable lightbox on checklist graphic
Document/index.md	Disable lightbox on MASTG cover image

Comments suppressed due to low confidence (3)

weaknesses/index.md:11

• Add an appropriate alt attribute (or alt="" if purely decorative) to this <img> element for screen-reader accessibility.

    <img src="../assets/maswe-overview.png" style="width: 50%; border-radius: 5px; margin: 2em" class="no-lightbox"/>

docs/index.md:20

• This image is missing an alt attribute—please add meaningful alt text or alt="" if it’s decorative.

<img style="padding: 10px; max-width: 250px" src="assets/logo_circle.png"  class="no-lightbox"/>

docs/contact.md:9

• Consider adding an alt attribute to this <img> so screen readers will skip or announce it appropriately.

<img src="../../assets/logo_circle.png" width="150px" style="margin-left: 4em; margin-top: 0em;" class="no-lightbox" align="right">

[cpholguera]

I deployed the site for testing on mobile. I like it, but I noticed a few issues:

• When you click on an image, it opens, but you cannot zoom in.
• You can easily navigate to the next image and lose context.
• If you're on an image and use the "go back" gesture, you go back in your browsing history instead of closing the image.

[TheDauntless]

• zooming: Works well on ipad, a little bit less on a smartphone, but it does work. We could potentially disable the lightbox if the screen is smaller than X pixels?
• Scrolling: Not possible to disable without a hack, but it's tricky since we're using the extension. Feels like a minor issue?
• The back-button is also not possible without hacking something together.

Are you fine with these limitations, or do you want me to search for a different lightbox implementation? I can pretty easily implement the 1st item, which would solve nr3 as well?

[cpholguera]

I'll think about it, let's discuss the options next week. The less hacky, the better.

[TheDauntless]

As a poc:

• No lightbox on mobile (<768 px)
• Single item per click. It's still "a hack" but one I got from the official glightbox project author
• Works on resize too, switching between lightbox and no lightbox

[cpholguera]

Closing since the files have moved.

See OWASP/mas-website#9