iNext10
@iNext10
Web Developing (Front End) Junior

Как сделать чтобы по нажатию на картинку она всплывала в новом окне?

Есть сайт-портфолио, на котором имеется много картинок.
Этим картинкам задан width: 200px, поэтому, пользователю будет сложно рассмотреть их.
Нужно сделать так, чтобы по нажатию на картинку, она всплывала в модальном окне, посередине сайта.

Я пытался найти готовое решение на youtube и на остальных источниках, но у меня не получилось. Есть какие-нибудь готовые решения?
  • Вопрос задан
  • 135 просмотров
Решения вопроса 2
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
Как бы для таких задач уже имеется огромное множество готовых решений, например на ванильном JS без JQ:

https://sachinchoolur.github.io/lightgallery.js/
https://feimosi.github.io/baguetteBox.js/

Ну, а если вы используете JQuery, то наверное проще тогда использовать FancyBox 3 . ИМХО.

Хм... а если серьёзно всё это довольно таки легко реализуется и без лишних зависимостей. В данном примере конечно практически есть стандартный функционал, но качество кода не слишком good, да и сработает для одной картинки. А если будет 200 например? Тут поможет цикл. При открытии окна конечно есть анимация, но при закрытии она отсутствует. Можно решить с помощью дополнительных классов + setTimeOut. Перелистывание прямо в активном режиме можно сделать, но этот будет чуток сложнее.

Если найду время, то попозже набросаю вариант без зависимостей и если получится, обновлю ответ.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы