عدم ظهور المكون modal في بوتستراب 5

قمت بمراجعة الكود اكثر من مرة ولكن لا يعمل

لا يظهر modal box رغم عدم ظهور اى اخطاء فى console

Code html

        <div class="container">
          <div class="row">
              <div class="row">
                  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                    <a class="thumbnail" href="#" data-image-id="image-gallery-image" data-toggle="modal" data-title="egypt-1"
                         data-image="./images/EGYPT-G1.jpg"
                         data-target="#image-gallery">
                         <img class="img-thumbnail"
                               src="./images/EGYPT-G1.jpg"
                               alt="Another alt text">
                              </a>
                  </div>
                  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                    <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-2"
                    data-image="./images/EGYPT-G2.jpg"
                    data-target="#image-gallery">
                    <img class="img-thumbnail"
                    src="./images/EGYPT-G2.jpg"
                               alt="Another alt text">
                      </a>
                  </div>
                  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                      <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-3"
                         data-image="./images/EGYPT-G3.jpg"
                         data-target="#image-gallery">
                          <img class="img-thumbnail"
                               src="./images/EGYPT-G3.jpg"
                               alt="Another alt text">
                      </a>
                  </div>
                  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                      <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-4"
                         data-image="./images/EGYPT-G4.jpg"
                         data-target="#image-gallery">
                         <img class="img-thumbnail"
                               src="./images/EGYPT-G4.jpg"
                               alt="Another alt text">
                      </a>
                  </div>
                  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                      <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-5"
                         data-image="./images/EGYPT-G5.jpg"
                         data-target="#image-gallery">
                          <img class="img-thumbnail"
                          src="./images/EGYPT-G5.jpg"
                               alt="Another alt text">
                      </a>
                  </div>
                  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                      <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-6"
                         data-image="./images/EGYPT-G6.jpg"
                         data-target="#image-gallery">
                          <img class="img-thumbnail"
                               src="./images/EGYPT-G6.jpg"
                               alt="Another alt text">
                      </a>
                  </div>
                  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                      <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-7"
                         data-image="./images/EGYPT-G7.jpg"
                         data-target="#image-gallery">
                          <img class="img-thumbnail"
                               src="./images/EGYPT-G7.jpg"
                               alt="Another alt text">
                      </a>
                  </div>
                  <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                      <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="egypt-8"
                          data-image="./images/EGYPT-G8.jpg"
                          data-target="#image-gallery">
                          <img class="img-thumbnail"
                               src="./images/EGYPT-G8.jpg" 
                               alt="Another alt text">
                      </a>
                  </div>
              </div>            

              <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-dialog modal-lg">
                      <div class="modal-content">
                          <div class="modal-header">
                              <h4 class="modal-title" id="image-gallery-title"></h4>
                              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
                              </button>
                          </div>
                          <div class="modal-body">
                              <img id="image-gallery-image" class="img-responsive col-md-12">
                          </div>
                          <div class="modal-footer">
                              <button type="button" class="btn btn-secondary float-left" id="show-previous-image"><i class="fa fa-arrow-left"></i>
                              </button>
      
                              <button type="button" id="show-next-image" class="btn btn-secondary float-right"><i class="fa fa-arrow-right"></i>
                              </button>
                          </div>
                      </div>
                  </div>
              </div>

Code JS

$(function() {
    // Gallery Tours

    let modalId = $('#image-gallery');


    loadGallery(true, 'a.thumbnail');

    //This function disables buttons when needed
    function disableButtons(counter_max, counter_current) {

        $('#show-previous-image, #show-next-image').show();

        if (counter_max === counter_current) {

            $('#show-next-image').hide();

        } else if (counter_current === 1) {

            $('#show-previous-image').hide();

        }
    }

    /**
     *
     * @param setIDs        Sets IDs when DOM is loaded. If using a PHP counter, set to false.
     * @param setClickAttr  Sets the attribute for the click handler.
     */

    function loadGallery(setIDs, setClickAttr) {
        let current_image,
            selector,
            counter = 0;

        $('#show-next-image, #show-previous-image').on('click',function () {
            if ($(this).attr('id') === 'show-previous-image') {
                current_image--;
            } else {
                current_image++;
            }

            selector = $('[data-image-id="' + current_image + '"]');

            updateGallery(selector);
        });

        function updateGallery(selector) {
            let $sel = selector;
            current_image = $sel.data('image-id');
            $('#image-gallery-title').text($sel.data('title'));

            $('#image-gallery-image').attr('src', $sel.data('image'));

            disableButtons(counter, $sel.data('image-id'));
        }

        if (setIDs == true) {
            $('[data-image-id]').each(function () {
                counter++;
                $(this).attr('data-image-id', counter);
            });
        }
        $(setClickAttr)
            .on('click', function () {
            updateGallery($(this));
        });
    }
});

Code SCSS

  #image-gallery {
        .modal-footer{
            display: block;
        }
    }
    .thumb{
        margin-top: 15px;
        margin-bottom: 15px;
    }