body.addEventListener('mousedown', showEffect, false);

<link rel='stylesheet' id='MDB-css' href='https://khanshadid.com/artsite/wp-content/themes/understrap/css/mdb.min.css?ver=4.9.8' type='text/css' media='all' />
<link rel='stylesheet' id='understrap-styles-css' href='https://khanshadid.com/artsite/wp-content/themes/understrap/css/theme.min.css?ver=0.8.7.1541037375' type='text/css' media='all' />
<link rel='stylesheet' id='Style-css' href='https://khanshadid.com/artsite/wp-content/themes/understrap/style.css?ver=4.9.8' type='text/css' media='all' />
<script type='text/javascript' src='https://khanshadid.com/artsite/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='https://khanshadid.com/artsite/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='https://khanshadid.com/artsite/wp-content/themes/understrap/js/mdb.js?ver=4.9.8'></script>
<script type='text/javascript' src='https://khanshadid.com/artsite/wp-content/themes/understrap/js/script.js?ver=4.9.8'></script>

The Lightbox gallery is initialized in script.js file which loads after mdb.js this is the code:

jQuery(document).ready(function () {

jQuery(function () {

var stylesheet_directory_uri="<?php echo get_stylesheet_directory_uri(); ?>";

jQuery("#mdb-lightbox-ui").load(stylesheet_directory_uri+"/mdb-addons/mdb-lightbox-ui.html");

});

});

This is my slider code. 

 <div class="container">

<!-- First row -->

<div class="row">

  <!-- First column -->

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

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

    <div class="mdb-lightbox no-margin">

      <figure class="col-md-4">

        <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(94).jpg" data-size="1600x1067">

          <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(94).jpg" class="img-fluid">

        </a>

        <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus nobis sit veritatis

          cumque! Placeat voluptate aut pariatur! Nihil molestiae quos explicabo dignissimos quam cupiditate

          sequi corporis eaque corrupti. Vel, est.</figcaption>

      </figure>

      <figure class="col-md-4">

        <a href="https://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(96).jpg" data-size="1600x1067">

          <img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(96).jpg" class="img-fluid" />

        </a>

        <figcaption>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 anim id est laborum.</figcaption>

      </figure>

    </div>

  </div>

  <!-- First column -->

</div>

<!-- First row -->

    </div>