Делаем pop-up для owl-carousel с помощью Magnific Popup

Задача такая — сделать открытие картинок из карусели Owl-Carousel в pop-up окне по типу light box.

Имеем такую карусель:
delaem-pop-up-dlya-owl-carousel-s-pomoschyu-magnific-popup-1

Решаем эту задачу на шаблоне, в котором уже подключены 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

Получаем такой вид:
delaem-pop-up-dlya-owl-carousel-s-pomoschyu-magnific-popup-2

Если не загружаются автоматически демо-данные для шаблона Avada

Если не загружаются автоматически демо-данные для шаблона Avada нужно увеличить WP Memory Limit и прописать…

Добавляем к товару новый таб ‘Основной ингредиент’ в Woocommerce

Добавляем к товару новый таб ‘Основной ингредиент’ Данный код добавляем в файл functions.php: // Добавляем…

Как сделать скачивание файла pdf после заполнения формы c помощью плагина Contact Form 7

Как сделать скачивание pdf-файла после отправки формы с помощью плагина Contact Form 7. Открываем pdf-файл…

На премиумных шаблонах перестали работать карты Google

Ошибка При загрузке Google Карт на этой странице возникла проблема. Подробности вы найдете в консоли…

Ответить