MDB Lightbox - Style works but the Functions do not

Expected behavior

The lightbox should operate as intended.

Actual behavior

First of all, I do own and use MDB Pro. After encountering multiple failures for the lightbox to function, I created a base page with the recommended stylesheets (in the head) and the scripts (at the bottom of the body). I populated the page with the sample code from the lightbox example and the images appear and have the intended style effects (hover effect, mouse changes to magnifier).

However, clicking on the image just opens the image page. For example, when I click on the image of the cat (https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).jpg ) it takes me directly to the image URL instead of opening it in a lightbox.

I verified that the UI file is in place, that it's being referenced properly in the script, and that it doesn't generate an error. I've also checked that the lightbox files in the /img/lightbox folder in place. When I inspect the page in Chrome it doesn't generate an error or issue. I've tried viewing it in an incognito tab, clearing my cache, having another programmer look it over, and end up with the same result on their system, and I'm getting frustrated with this.

One thought I had was that the test page I made is .php, but it also happens on a .HTML version.

I've thoroughly reviewed the examples, snippets, recommendations, and support pages for a solution but haven't found one for my situation.

Could you please offer some thorough documentation or a walkthrough of how the lightbox functions and calls all it's features? I haven't been able to determine a cause for this issue, and the existing documentation doesn't really offer much to go off of.

Resources (screenshots, code snippets, etc.)

This contains the code itself that I'm using. File pathing is proper in my system, not sure if it translates accurately to the snippet though. Code Snippet