javascript - 带有弹出式图库的 Flexslider

Question

我正在使用 flexslider 进行一些图像旋转，现在需要用这个幻灯片放映实现一个弹出画廊，即，当用户点击 slider 内的事件幻灯片时，想要在灯箱中显示为画廊.

所以我尝试合并“magnificPopup”，它有效，但问题是它获取了幻灯片的所有实例，也就是说，如果我在 slider 中有 2 个图像，我将在弹出画廊中获得 4 个，即 magnificpopup 获取包括“克隆”在内的所有实例，那么我该如何解决这个问题，有没有其他方法，或者我可以使用的插件或回调函数？下面是我试过的代码，都是基本实现

弹性 slider :

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

Answer 1

在 flexSlider 之前放置 magnificPopup

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

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

这是一个 DEMO