Flexslider with a popup Gallery

Question

I am using flexslider for some image rotation, now there is a requirement to implement a Popup Gallery with this slide show, ie, when a user clicks on active slide inside the slider, want to show in a light box as a gallery.

So I tried to incorporate 'magnificPopup', it works, but the issue is it grabs all the instances of slides, that is if I have 2 images in a slider I will get 4 inside the popup gallery, ie, magnificpopup fetches all the instances including 'clones', So how can I implement this issue, Is there any other way, or plugin or call back functions i can use?? Below is the code I tried, all are basic 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

put magnificPopup before flexSlider

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

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

and this is a DEMO