可以Magnific Popup包含一個滑塊？

Question

我正在創建一個包含多個圖像庫的網站。這些圖像實際上是一個封面 - 當點擊時我想使用Magnific Popup打開一個包含該圖像內的圖像的幻燈片的燈箱（不會從圖庫項目1到圖庫項目2等...）我已經使用Swiper插件創建了幻燈片，並希望在彈出窗口中打開它。我知道你可以在彈出窗口中打開html內容，但是包含整個幻燈片的div怎麼樣？這似乎是合乎邏輯的，但我無法讓它工作。

Answer 1

我只需要在Magnific Popup中使用Flexslider就可以做到這一點。爲了讓它起作用，我需要在Magnific回調中初始化Flexslider。

$('.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

如果你不介意改變圖書館，我建議光滑的燈箱。

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

它用油滑一起工作：

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