Как сверстать такой гибрид галереи и слайдера?

Question

[Максим]

Доброго времени суток.

Подскажите плз.
с JS'ом пока что совсем неуверенно общаюсь.

Что загуглить или какую связку библиотек применить что бы решить такую задачу:

Есть превьюхи (они уже довольно сложным образом спозиционированы и адаптированы, там уже свои обёртки и т.п.)
При клике на каждую открывается соответствующий превьюхе попап в котором я могу разместить любой контент. Этот контент не обязательно идентичен тому что в других попапах. И плюс к этому, когда откроется попап, нужно что бы была возможность перейти к следующему или к предыдущему попапу не закрывая тот что мы изначально открыли.

Возможно решается очень просто, но особо не нагуглил ничего и на кодпене не нашёл прям того что нужно.
Подскажите плз.

Спасибо!
p.s. на стрелке влево не к "№ 8", а "к № 6" конечно же, опечатка :)

Answer 1

[Андрей Б.]

куда я могу положить что хочу

- как это понимать? Откуда будет браться "что хочу"?
Если вы про "перетащи и брось", то есть библиотечки например - www.dropzonejs.com
Сам попап + превьюхи это обычная галерея, коих тоже полно, вопрос только в вашем "положить что хочу". Готовых решений именно в такой связке я не встречал.

Comments

[Максим]

Андрей Б. Да, немного непонятно написал, сорян.
Ничего перетаскивать в попапы не требуется. Я хотел сказать, что там может быть любое содержимое и от попапа к попапу это содержимое может быть разным. Типа не шаблонно везде одно и тоже. Просто везде своя разметка внутри попапа))
Спасибо!

[Андрей Б.]

Максим Можно сделать например на fancybox fancyapps.com/fancybox/3
Вам нужен пример с inline content. Попробуйте сами, документация понятная. Я уже спать пошёл. Если не выйдет, накидаю пример днем.

[Максим]

Андрей Б.: Спасибо большое, тоже утром попробую, должно получиться, если fancybox позволяет :)

[Сергей]

Возможно я не понял о чем идет речь, но по-моему это решается стандартным инструментарием Бутстрапа. При клике по превьюшке вызывается модальное окно со встроенным слайдером(стандартная карусель, в которую можно пихать что хочешь), на котором в зависимости от выбранной превьюхи выбирается активный слайд. Разве нет?

[Максим]

Hando: Ого!) Я не копался в бутстрапе для решения этой задачи) Очень надеюсь что получится) Спасибо большое) Сейчас посмотрю)) Тоесть это элемент карусель из бутстрапа?) Сорян, пока что я на Вы с библиотечками, только начинаю щупать всё это дело)

[Сергей]

Максим: В бутстрапе можно кастомизировать сборку - то есть выбрать только то что вам нужно. getbootstrap.com/customize Вам нужны - Modal и Carousel. Если же вы уже используете фреймворк Бутстрап, то вам достаточно лишь их обозначить, как указано в документации Бутстрапа. getbootstrap.com/javascript/#modals Только вместо кнопки, у вас будет превьюшка. Главное чтобы у нее был data-toggle="modal"

[Максим]

Hando: Bootstrap не подключён, сейчас попробую сделать как вы подсказали) Большое спасибо)
Попробую разобраться. Как отдельно работают Modal и отдельно Carousel примерно понимаю. Но как правильно совместить их что бы получилось нужное решение пока не ясно)
ЧТо бы открыть нужную модалку при клике по нужной превьюхе - юзать Modal, разберусь думаю, а дальше как Carousel заставить работать именно так как нужно не очень)
Спасибо за то что подсказали направление)

[Сергей]

Максим: Для того, чтобы в модальном окне открывался определенный слайд, я думаю нужно на js написать что то типо:

$(".slide-one").click(function(){
    $("#myCarousel").carousel(1);
  });

Где slide-one класс вашей превьюшки. Модальное окно я думаю лучше сделать одно, а в нем карусель со всеми слайдами и по клику на превьюшку вызывать с помощью js определенный слайд

[Максим]

Hando: оооо, круто! Звучит вполне воплощаемо в жизнь)) Спасибо большое!))) Класс!))

[Андрей Б.]

Максим Bootstrap как вариант. А по fancybox накидал пример codepen.io/anon/pen/wJoKaM

[Максим]

Андрей Б.: Супер!!! Спасибо большое) Сейчас разберусь как это работает тоже))

Answer 2

[Егор Живагин]

Да хоть на чистом CSS запилить можно)) Хотя, это не очень правильно, наверное.
Гуглите переключатели на JS (Табы). Эдак можно открывать попап. Со стрелочками можно попробовать то же самое

Comments

[Максим]

Егор Живагин не думал про табы) Я попробую, спасибо)

[Егор Живагин]

Максим: там ещё правильно про Бутстрап подсказывают, рабочий вариант

[Максим]

Егор Живагин: Да, попробую) Надеюсь прокатит) Спасибо)