javascript – 带弹出图库的Flexslider

我正在使用flexslider进行一些图像旋转,现在需要使用此幻灯片实现Popup Gallery,即,当用户点击滑块内的活动幻灯片时,想要在灯箱中显示为图库.

所以我尝试合并’magnificPopup’,它有效,但问题是它抓住幻灯片的所有实例,即如果我在滑块中有2个图像,我将在弹出库中获得4个,即,magnificpopup获取所有实例包括’克隆’,那么如何实现这个问题,有没有其他方法,或插件或回调函数,我可以使用？下面是我试过的代码,都是基本的实现

Flex Sldier：

$('.slideTwo').flexslider({
    animation: "slide",
    controlNav: true,
    directionNav: false,
    animationLoop: true,
    slideshow: false
});

MagnificPopup：

$('.popup-link').magnificPopup({
    type: 'image',
    gallery:{enabled:true}
});

HTML：

<div class="slideTwo" id="slideTwo">
    <ul class="slides">
        <li>
            <a class="popup-link" href="img/room1.jpg"><img src="img/room1.jpg" alt="">
                <span>East Wall</span>
            </a>
        </li>
        <li>
            <a class="popup-link"href="img/room21.jpg"><img src="img/room21.jpg" alt="">
                <span>West Wall</span>
            </a>
        </li>
    </ul>
</div>

解决方法:

在flexSlider之前放置magnificPopup

$('.popup-link').magnificPopup({
      type: 'image',
      gallery:{enabled:true}
});

$('.slideTwo').flexslider({
   animation: "slide",
   controlNav: true,
   directionNav: false,
   animationLoop: true,
   slideshow: false
});

这是一个DEMO

标签：jquery,javascript,slideshow,flexslider,magnific-popup
来源： https://codeday.me/bug/20190609/1204388.html