Почему не появляется контент модального окна при вызове?

Question

[Сергей Бурдужа]

Я создал модельное окно, в котором отображаются два слайдера, связанные друг с другом. Кликаешь на слайдер с миниатюрами, реагирует второй слайдер. Для этого использовал плагин slick.js - прекрасно все работает.
Проблема в другом.
Когда кликаю на ссылку в галлереи, то появляется модальное окно без слайдеров, отображаются только стрелки одного из слайдеров, ну и статичный контент(Заголовок окна и кнопка для закрытия).
Чтобы отобразились слайдеры, нужно нажать на одну из стрелок.
Потом модалку можно закрыть и после очередного открытия уже все нормально отображается.
В чем может быть проблема?
Впервые с этим сталкиваются.
Вот ссылка на страницу sit
блок Реализованные проекты.
Нужно кликнуть на ссылку элемента галлереи, чтобы открывалась модалка.

Заранее благодарен за помощь.

Comments

[Дмитрий]

Добрый вечер.
Смотрите консоль браузера на предмет ошибок. Так же смотрите логи сервера.

[Сергей Бурдужа]

slo_nik, В браузере только одна ошибка. Она связана с тем, что галерея на экране меньше 626 превращается в слайдер, и соответственно, больше 626 - обратно.
Вот код

/*gallery slider
    =======================================*/
    $(window).on("load resize", function() {
        var width = $(document).width();

        if (width > 656) {
            $('#js-gallery-content').slick('unslick');
        } else {
            $('#js-gallery-content').not('.slick-initialized').slick({

            });
        }
    });

Ошибка касается строки с unslick.

Uncaught TypeError: Cannot read property 'unslick' of undefined
    at a.fn.init.i.fn.slick (slick.min.js:1)
    at main.js? [sm]:116
    at dispatch (jquery.min.js:3)
    at q.handle (jquery.min.js:3)

[Дмитрий]

Сергей Бурдужа, исправьте ошибку и должно заработать.

[Дмитрий]

Сергей Бурдужа, вот интересно, почему некоторые посетители форума пытаются впихнуть код в ответ на комментарий?
Весь проблемный код должен быть в вопросе и только в вопросе и нигде больше!!!

[Сергей Бурдужа]

slo_nik, Я бы исправил, только если бы знал как))
Несмотря на ошибку галерея работает как я ожидал.
Это решение я на этом же форуме нашел.
toster

Answer 1

[Сергей Бурдужа]

Нашел решение здесь github в конце страницы.
Оказывается, что слайдеры не появлялись, так как модальное окно в начале была скрыта.

Чтобы исправить проблему нужно обновить слайдеры после появления окна.

$('#js-gallery-content .gallery__item .gallery__title a').on('click', function(e) {
        e.preventDefault();

        $('body').addClass('hidden');
        $('#js-overlay').fadeIn('300');
        $('#js-gallery-modal').css('display', 'block');
        $('#js-gallery-slider-big').slick("refresh");
        $('#js-gallery-slider-small').slick("refresh");
    });

Comments

[tyzberd]

это правильно, только у вас не 1 окно и 1 набор слайдеров будет, поэтому не через id, а через классы. А еще лучше для модального окна использовать готовую библиотеку.
И при добавлении overflow: hidden на body исчезает прокрутка, само окно тоже не скролится и на ноутбуке вся галерея не помещается по высоте.