baguetteBox.js не работает и показывает элементы управления внизу страницы

Question

Я использую baguetteBox.js на веб-сайте на двух разных страницах:

• домашняя страница
• галерея

В галерее это работает хорошо, нона главной странице я не могу найти, почему элементы управления лайтбоксом (то есть: id="baguetteBox-overlay") появляются в нижней части веб-страницы следующим образом:

На обеих веб-страницах яЯ загружаю те же активы, и консоль не показывает никаких ошибок.

Вы можете видеть это вживую на:

• домашняя страница: http://keraban.marcanuy.com <- та, у которой естьпроблема </li>
• галерея: http://keraban.marcanuy.com/gallery/

Использование _baguettebox.js / 1.10.0 (с Bootstrap 4 тоже)

Есть идеи, как это исправить?

Соответствующий код:

На домашней странице

<section class="gallery-block compact-gallery">
    <div class="container">
        <div class="row no-gutters">


            <div class="col-md-6 col-lg-4 item zoom-on-hover">
                <a class="lightbox" href="/media/images/image5.width-1400.jpg">
                    <img class="img-fluid image" src="/media/images/image5.width-1400.jpg">
                    <span class="description">
                        <span class="description-heading">Image 5</span>

                    </span>
                </a>
            </div>


            <div class="col-md-6 col-lg-4 item zoom-on-hover">
                <a class="lightbox" href="/media/images/image1.width-1400.jpg">
                    <img class="img-fluid image" src="/media/images/image1.width-1400.jpg">
                    <span class="description">
                        <span class="description-heading">Image 1</span>

                    </span>
                </a>
            </div>
            ....

    </div>
    </div>
</section>

Загрузка JS внизу:

<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script>
 baguetteBox.run('.compact-gallery', {
     animation: 'slideIn',
 });
</script>

Answer 1

Базовая таблица стилей отсутствовала, и появилось диалоговое окно, добавление правильной таблицы стилей исправляет ее <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" />.