Bootstrap лайтбокс ekko выдает ошибку

Question

Я пытаюсь использовать лайтбокс ekko, но консоль выдает ошибку в консоли как

Uncaught TypeError: $ (...). EkkoLightbox не является функцией

Любые выводы будут полезны. Спасибо

$(document).ready(function() {

  $(document).on('click', '[data-toggle="lightbox"]', function(event) {
     event.preventDefault();
     $(this).ekkoLightbox();
  });
});

  .x {
    width: 100%;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-xs-4">
    <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="gallery" data-title="Flexible Room">
      <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid x">
    </a>
  </div>
  <div class="col-xs-4">
    <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="gallery" data-title="Board Room">
      <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid x">
    </a>
  </div>
  <div class="col-xs-4">
    <a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="gallery" data-title="Seminar Room">
      <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid x">
    </a>
  </div>
</div>