title: Flexslider with a popup Gallery
body: <p>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.</p>
  
  <p>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</p>
  
  <p>Flex Sldier:</p>
  
  <pre><code>$('.slideTwo').flexslider({
      animation: "slide",
      controlNav: true,
      directionNav: false,
      animationLoop: true,
      slideshow: false
  });
  </code></pre>
  
  <p>MagnificPopup :</p>
  
  <pre><code>$('.popup-link').magnificPopup({
      type: 'image',
      gallery:{enabled:true}
  });
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="slideTwo" id="slideTwo"&gt;
      &lt;ul class="slides"&gt;
          &lt;li&gt;
              &lt;a class="popup-link" href="img/room1.jpg"&gt;&lt;img src="img/room1.jpg" alt=""&gt;
                  &lt;span&gt;East Wall&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a class="popup-link"href="img/room21.jpg"&gt;&lt;img src="img/room21.jpg" alt=""&gt;
                  &lt;span&gt;West Wall&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>