Flexslider с всплывающей галереей

Question

Я использую flexslider для некоторого поворота изображения, теперь существует потребность в реализации всплывающей галереи с этим показом слайдов, то есть когда пользователь нажимает на активный слайд внутри слайдера, хотите показать в световая коробка как галерея.

Итак, я попытался включить «magnificPopup», он работает, но проблема в том, что он захватывает все экземпляры слайдов, то есть если у меня есть 2 изображения в слайдере, я получу 4 внутри всплывающей галереи, т. Е. Magnificpopup извлекает все экземпляры, включая «клоны», так как я могу реализовать эту проблему, есть ли другой способ или плагин или функции обратного вызова, которые я могу использовать? Ниже приведен код, который я попробовал, все являются основными implimentation

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> 

Answer 1

поставил magnificPopup перед тем flexSlider

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

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

и это DEMO