Делаем pop-up для owl-carousel с помощью Magnific Popup.
Задача такая — сделать открытие картинок из карусели Owl-Carousel в pop-up окне по типу light box.
Имеем такую карусель:
Решаем эту задачу на шаблоне, в котором уже подключены owl.carousel.min.js и jquery.magnific-popup.min.js, поэтому подключать еще и fancybox или lightbox нецелесообразно.
Добавим в файл скриптов custom.js такие функции:
// denis js // Make pop-up images for owl-slider on the offer page // получаем урл картинки при нажатии на нее, и передаем ее в magnificPopup для открытия в поп-ап окне var imgSrc = img; $('.deal-img-slider .owl-item img').click(function(){ imgSrc = $(this).attr('src'); }); $('.deal-img-slider .owl-item img').magnificPopup({ type:'image', callbacks: { elementParse: function(item) { item.src = imgSrc; } } }); // // end of denis js
Получаем такой вид: