Hello there,

I am trying to initialize a lightbox gallery in my wordpress project. Even with the lightbox example code from https://mdbootstrap.com/docs/jquery/javascript/lightbox/ I cannot make it work, though. It keeps throwing the error 

mdb.js?ver=1.0.0:24481 Uncaught TypeError: Cannot read property 'firstChild' of undefined
at Object.getChildByClass (mdb.js?ver=1.0.0:24481)
at a.init (mdb.js?ver=1.0.0:24778)
at openPhotoSwipe (mdb.js?ver=1.0.0:26029)
at HTMLDivElement.onThumbnailsClick (mdb.js?ver=1.0.0:25937)

when I click on one of the images and does not react at all. I've been trying all sort of things and am close to giving up... Please help.

I run my homepage on a Xampp server.#

Cheers,

Hermann

Edit: 

I initialize with this .js file: 

// object-fit polyfill run
objectFitImages();
/* init Jarallax */
jarallax(document.querySelectorAll('.jarallax'));

jarallax(document.querySelectorAll('.jarallax-keep-img'), {
    keepImg: true,
});

// MDB Lightbox Init
$(function () {
$("#mdb-lightbox-ui").load("<?php echo get_template_directory_uri(); ?>/mdb-addons/mdb-lightbox-ui.html");
});

And this is the code I use for the images:

<!--First row-->
<div class="row">

<!--First column-->
<div class="col-md-12">
<div id="mdb-lightbox-ui"></div>
<!--Full width lightbox-->
<div class="mdb-lightbox">
<figure class="col-md-4"><a href="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(63).jpg" data-size="1600x1067">
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(63).jpg">
</a></figure>
<figure class="col-md-4"><a href="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(66).jpg" data-size="1600x1067">
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(66).jpg">
</a></figure>
<figure class="col-md-4"><a href="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(65).jpg" data-size="1600x1067">
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(65).jpg">
</a></figure>
<figure class="col-md-4"><a href="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(67).jpg" data-size="1600x1067">
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg">
</a></figure>
<figure class="col-md-4"><a href="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(68).jpg" data-size="1600x1067">
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(68).jpg">
</a></figure>
<figure class="col-md-4"><a href="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(64).jpg" data-size="1600x1067">
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(64).jpg">
</a></figure>
<figure class="col-md-4"><a href="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(69).jpg" data-size="1600x1067">
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(69).jpg">
</a></figure>
<figure class="col-md-4"><a href="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(59).jpg" data-size="1600x1067">
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(59).jpg">
</a></figure>
<figure class="col-md-4"><a href="https://mdbootstrap.com/img/Mockups/Lightbox/Original/img%20(70).jpg" data-size="1600x1067">
<img class="img-fluid z-depth-1" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(70).jpg">
</a></figure>
</div>
<!--/Full width lightbox-->

</div>
<!--/First column-->

</div>
<!--First row-->

The .js file is included via functions.php