Как реализовать такую «всплываху» (модалку?\галлерею?)?

Question

[Максим]

Доброго времени суток.
Помогите плз. Опыта мало пока что.

Не получается уже который час реализовать такую штуку вот как на прилагающемся скрине.


Сейчас чуть больше деталей:
1) При нажатии на какую-либо из мелких превьюшных фоток появляется блок по центру экрана с её увеличенным вариантом;

2) В блоке, помимо увеличенного варианта фотки, располагается описание к фотографии. Это описание на полупрозрачном фоне;

3) Так же, в правом нижнем углу будет кнопка в виде иконки типа Share. Вот когда на эту иконку share клацают - появляется блок с социконками;

4) Когда появляется само окно с увеличенной фоткой, остальная область страницы должна затемняться немного;

Вроде всё.
Сразу оговорюсь.
Я искал готовые решения на JQuery, смотрел CodePen, но то одно то другое не так.

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

Уже подумываю, что даже не зная JS возможно проще таки разобраться и написать самому этот механизм появления дива, в который я запихну ту вёрстку, которая мне нужна.

Спасибо! :)

Answer 1

[Павел]

kenwheeler.github.io/slick
подходит по всем пунктам , хорошо кастомизируется и есть возможность навесить внутрь слайда что угодно

Comments

[Максим]

Угу, спасибо) Про слик я слышал, но думал что он не подойдёт)
Видимо надо покопаться в нём детальнее)
Я думал, что слик это именно слайдер.
А мне то нужно что бы моё окно с увеличенной картинкой и соцкнопками появлялось только при клике на уменьшенную фотку.
Видимо слик можно так настроить, раз вы пишете) Сейчас пороюсь)
Спасибо!

[Павел]

Максим: можно сделать чтоб он листал не картинки , а div , а внутри уже что угодно . Вот демка с сайта joxi.ru/8AnzVkntEbalAO

[Максим]

ага) Да, это понятно и очень хорошо, но, как я понял, в слике же слайд всегда открыт, а мне нужно что бы слайд появлялся при нажатии на уменьшенную фотку и пропадал совсем, при нажатии на область за фоткой или на кнопку закрыть внутри слайда))

[Павел]

Максим: ну можно просто тогда через fancybox сделать , разметка мелких картинок , а при нажатии всплывает div с нужным содержимым , вопрос конечно что в таком случае шарить если так или иначе это одна и таже страница

[Максим]

mrusklon: А Фэнсибокс позволяет листать те блоки которые всплывают при нажатии?)

[Павел]

Максим: нет , об этом я не подумал , ну тогда самопис , темболее что share btn по сути тоже скрипт

[Максим]

mrusklon: спасибо большое за уделенное время :)