I am trying to create a lightbox gallery but when I click an image lightbox did not open and send me image url. How can I solve this.

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/mdb.min.css">
   <!--Section: gallery-->
  <section id="gallery" class="text-center py-5">

      <!-- Container -->
      <div class="container">

          <!-- Section heading -->
          <h2 class="h1-responsive font-weight-bold mb-5">Our best projects</h2>
          <!-- Section description -->
          <p class="grey-text w-responsive mx-auto mb-5">Duis aute irure dolor in reprehenderit in
              voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
              cupidatat non proident, sunt in culpa qui officia deserunt mollit est laborum.</p>

          <div class="row">
              <div class="col-md-12">

                  <div id="mdb-lightbox-ui2"></div>

                  <div class="mdb-lightbox">

                      <figure class="col-md-4">
                          <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(145).jpg"
                              data-size="1600x1067">
                              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(145).jpg"
                                  class="img-fluid">
                          </a>
                      </figure>

                      <figure class="col-md-4">
                          <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(150).jpg"
                              data-size="1600x1067">
                              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(150).jpg"
                                  class="img-fluid" />
                          </a>
                      </figure>

                      <figure class="col-md-4">
                          <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(152).jpg"
                              data-size="1600x1067">
                              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(152).jpg"
                                  class="img-fluid" />
                          </a>
                      </figure>

                      <figure class="col-md-4">
                          <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(42).jpg" data-size="1600x1067">
                              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).jpg"
                                  class="img-fluid" />
                          </a>
                      </figure>

                      <figure class="col-md-4">
                          <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(151).jpg"
                              data-size="1600x1067">
                              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(151).jpg"
                                  class="img-fluid" />
                          </a>
                      </figure>

                      <figure class="col-md-4">
                          <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(40).jpg" data-size="1600x1067">
                              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(40).jpg"
                                  class="img-fluid" />
                          </a>
                      </figure>

                      <figure class="col-md-4">
                          <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(148).jpg"
                              data-size="1600x1067">
                              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(148).jpg"
                                  class="img-fluid" />
                          </a>
                      </figure>

                      <figure class="col-md-4">
                          <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(147).jpg"
                              data-size="1600x1067">
                              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg"
                                  class="img-fluid" />
                          </a>
                      </figure>

                      <figure class="col-md-4">
                          <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(149).jpg"
                              data-size="1600x1067">
                              <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(149).jpg"
                                  class="img-fluid" />
                          </a>
                      </figure>

                  </div>

              </div>
          </div>

      </div>
      <!-- Container -->

  </section>
  <!--Section: gallery-->

$('body').scrollspy({
  target: '.dotted-scrollspy'
});

// initialize lightbox
$(function () {
  $("#mdb-lightbox-ui2").load("../mdb-addons/mdb-lightbox-ui.html");
});

$('.navbar-collapse a').click(function(){
        $(".navbar-collapse").collapse('hide');
    });

/* WOW.js init */
new WOW().init();