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

Question

Сергей Бурдужа @serii81

Я люблю phр...

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

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

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

Вопрос задан более трёх лет назад
203 просмотра

5 комментариев

Подписаться 1 Простой 5 комментариев

Дмитрий @slo_nik

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

Написано более трёх лет назад

Сергей Бурдужа @serii81 Автор вопроса

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

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

Написано более трёх лет назад
Дмитрий @slo_nik

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

Написано более трёх лет назад
Сергей Бурдужа @serii81 Автор вопроса

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

Написано более трёх лет назад

Решения вопроса 1

1 комментарий

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Средний
Как поместить картинку рядом с текстом?
- 1 подписчик
- час назад
- 25 просмотров
0

ответов
JavaScript

Простой
IMask. Как после сабмита очистить поле type="tel" и показать очищенную маску +7 (___) ___-__-__?
- 1 подписчик
- час назад
- 24 просмотра
0

ответов
CSS

Простой
Как выровнять по высоте заголовки в карточках товаров?
- 1 подписчик
- 5 часов назад
- 58 просмотров
3

ответа
HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 3 подписчика
- 9 часов назад
- 158 просмотров
1

ответ
CSS

Средний
Почему у элемента такое поведение?
- 4 подписчика
- 19 часов назад
- 1384 просмотра
0

ответов
CSS

Простой
Почему не работает transition свойство в scss файле через webpack?
- 1 подписчик
- 22 часа назад
- 58 просмотров
2

ответа
HTML

+1 ещё

Простой
Почему верхние и нижние внешние отступы пустого блока не схлопываются?
- 2 подписчика
- вчера
- 198 просмотров
4

ответа
CSS

Простой
Почему нет задержки между повторами анимации?
- 1 подписчик
- вчера
- 57 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему пустой div смещается, если ему задать margin-bottom?
- 2 подписчика
- вчера
- 177 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- вчера
- 62 просмотра
1

ответ
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Доработка парсера

23 апр. 2024, в 19:21

300 руб./за проект

Верстка сайта

23 апр. 2024, в 19:05

15000 руб./за проект

Создать учебный сайт на React

23 апр. 2024, в 19:01

7000 руб./за проект

Добрый вечер.
Смотрите консоль браузера на предмет ошибок. Так же смотрите логи сервера.
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 · 2018-08-11 22:44:19

Нашел решение здесь 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");
    });

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

Войдите, чтобы написать ответ

Как поместить картинку рядом с текстом?

IMask. Как после сабмита очистить поле type="tel" и показать очищенную маску +7 (_) _--?

Как выровнять по высоте заголовки в карточках товаров?

Как в файле svg заставить работать события?

Почему у элемента такое поведение?

Почему не работает transition свойство в scss файле через webpack?

Почему верхние и нижние внешние отступы пустого блока не схлопываются?

Почему нет задержки между повторами анимации?

Почему пустой div смещается, если ему задать margin-bottom?

Почему при добавление переменно в style, она перестаёт обновляться?

Минуточку внимания

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт