1

我正在创建一个包含多个图像库的网站。这些图像本质上是一个封面——当点击时，我想使用 Magnific Popup 打开一个灯箱，其中仅包含该项目中的图像幻灯片（不是从画廊项目 1 到画廊项目 2 等...）我已经使用 Swiper 插件设置了幻灯片，并希望在弹出窗口中打开它。我知道您可以在弹出窗口中打开 html 内容，但是包含整个幻灯片的 div 呢？这似乎合乎逻辑，但我无法让它发挥作用。

4

3 回答 3

0

我只需要在 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"
             }); 

         }

    }
});

对于您使用的任何滑块，这将是一个类似的过程。

于 2014-11-26T04:59:06.517 回答
0 
  $('.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

  });

     }

}

});
于 2015-07-22T05:00:42.550 回答
0

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

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

它与 Slick 一起工作：

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

于 2017-08-10T12:44:43.720 回答