Can Magnific Popup содержит ползунок?

Question

Я создаю сайт с галереей из нескольких изображений. Эти изображения по сути действуют на обложки - при нажатии на я хотел бы использовать Magnific Popup, чтобы открыть лайтбокс, содержащий только слайд-шоу изображений только в этом элементе (не от элемента галереи 1, до пункта галереи и т. Д.). Я уже создал слайд-шоу с помощью плагина Swiper и хотел бы открыть его во всплывающем окне. Я знаю, что вы можете открыть html-контент во всплывающем окне, но как насчет div, который содержит полное слайд-шоу? Это кажется логичным, но я не могу заставить его работать.

Answer 1

Мне просто нужно было сделать это с помощью Flexslider внутри Magnific Popup. Чтобы заставить его работать, мне нужно было инициализировать Flexslider в обратном вызове Magnific.

$('.ajaxpop').magnificPopup({ 
    type: 'ajax', 
    callbacks: { 
     parseAjax: function(mfpResponse) { 
      mfpResponse.data = $(mfpResponse.data).find('#slider-container'); 
     }, 
     ajaxContentAdded: function() { 
      $('.flexslider').flexslider({ 
        animation: "slide" 
      }); 

     } 

    } 
}); 

Это будет аналогичный процесс для любого слайдера, который вы используете.

Answer 2

$('.open-popup-link').magnificPopup({ 
    type: 'ajax', 
    callbacks: { 
    parseAjax: function(mfpResponse) { 
    mfpResponse.data = $(mfpResponse.data).find('#sliderContainer'); 
    }, 
    ajaxContentAdded: function() { 
     $("#owl-demo").owlCarousel({ 

     navigation : true, 
     nav : true, // Show next and prev buttons 
     slideSpeed : 600, 
     paginationSpeed : 700, 
     singleItem:true, 


     // "singleItem:true" is a shortcut for: 
     items : 1, 
     // itemsDesktop : false, 
     // itemsDesktopSmall : false, 
     // itemsTablet: false, 
     // itemsMobile : false 

    }); 

    } 

} 

}); 

Answer 3

Если вы не возражаете против изменения библиотеки, я предлагаю Slick-lightbox для этого.

https://github.com/mreq/slick-lightbox/

Он работает вместе с Slick:

https://github.com/kenwheeler/slick/