Flexslider彈出式圖庫

Question

我使用flexslider進行一些圖像旋轉，現在需要用此幻燈片來實現Popup畫廊，即當用戶單擊滑塊內的活動幻燈片時，要顯示在作爲畫廊的燈箱。

所以我試圖將'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> 

Answer 1

把magnificPopupflexSlider

前

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

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

，這是一個DEMO