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

如果您不介意更换库，我建议使用Slick-lightbox。

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

它与Slick一起工作：

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

Magnific Popup可以包含滑块吗？

3 个答案: