带有弹出式图库的弹性滑块

Flexslider with a popup Gallery

本文关键字：弹出式      更新时间：2023-09-26

我正在使用flexslider进行某些图像旋转，现在需要使用此幻灯片实现弹出库，即，当用户单击滑块内的活动幻灯片时，希望在灯箱中显示为图库。

所以我尝试合并"magnificPopup"，它可以工作，但问题是它抓取了幻灯片的所有实例，也就是说，如果我在滑块中有 2 张图像，我将在弹出图库中得到 4 张，即 magnificpopup 获取包括"克隆"在内的所有实例， 那么我该如何实现这个问题， 还有其他方法吗， 或我可以使用的插件或回调函数？？下面是我尝试过的代码，都是基本的暗示

Flex Sldier：

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

放大弹出窗口 ：

$('.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>
把

magnificPopup放在flexSlider之前 

$('.popup-link').magnificPopup({
      type: 'image',
      gallery:{enabled:true}
});
$('.slideTwo').flexslider({
   animation: "slide",
   controlNav: true,
   directionNav: false,
   animationLoop: true,
   slideshow: false
});

这是一个演示

相关文章：