Geek Answers Handbook

Flexslider with popup gallery

I use flexslider for some rotation of the image, now there is a requirement to implement a pop-up gallery with this slide show, that is, when the user clicks on the active slide inside the slider, I want to show it as a gallery in a bright window.

So, I tried to enable "magnificPopup", it works, but the problem is that it captures all instances of the slides, that is, if I have 2 images in the slider, I get 4 inside the popup gallery, i.e. selects magnificpopup all instances, including "clones", so how can I implement this problem, is there any other way, or a plugin or callback functions, that I can use? Below is the code I tried, all these are the main consequences.

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>
+4
1

magnificPopup flexSlider

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

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

DEMO

+5

More articles:


All Articles