Делаем 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

Получаем такой вид: