Как в мобильной версии сайта при клике на картинку открыть ее на весь экран?

Question

[akchl1]

Здравствуйте, как я могу сделать так, чтобы в мобильной версии сайта при клике на картинку она открывалась во весь экран, так как показано на 2 картинке

Comments

[Ankhena]

Если у вас в проекте уже используется jquery, то использовать fancybox. Если нет, то найти подходящий аналог на js.
Написать самостоятельно не буду предлагать.

[godsplane]

Ankhena, разве фансибокс не работает без jquery?

[Ankhena]

godsplane, если вы уверены, что его обновили и убрали зависимость, то это было бы прекрасной новостью. Давно не пользовалась им.

Answer 1

[Алексей Чернавцев]

Это простое модальное окно, и, судя по номеру изображения вверху скрина, со слайдером.

Можно сделать самописную модалку, можно использовать любое готовое решение.
Основа модалки без библиотек: https://www.w3schools.com/howto/howto_css_modals.asp
Модалка бутстрапа: https://getbootstrap.com/docs/4.0/components/modal/
Есть ещё куча других решений помимо бутстрапа.

Со слайдером советую не пытаться изобрести велосипед и использовать либу
Неплохая статья о слайдере ChiefSlider: https://itchief.ru/javascript/slider
https://swiperjs.com/
kenwheeler.github.io/slick

Делаете модальное окно, в нём - слайдер

Comments

[Антон Литвиненко]

И все таки это скорее галерея (light box), чем слайдер в модалке. Примеры галерей
Fancybox
Magnific popup