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>
put
magnificPopup
beforeflexSlider
and this is a DEMO