带有弹出式图库的 Flexslider
Flexslider with a popup Gallery
我正在使用 flexslider 进行一些图像旋转,现在需要使用此幻灯片放映实现弹出式画廊,即,当用户单击滑块内的活动幻灯片时,想要在灯箱中显示为画廊。
所以我尝试合并 'magnificPopup',它有效,但问题是它获取了幻灯片的所有实例,也就是说,如果我在滑块中有 2 张图像,我将在弹出式画廊中获得 4 张,即,magnificpopup 获取所有实例,包括 'clones',那么我该如何解决这个问题,有没有其他方法,或者我可以使用的插件或回调函数?下面是我试过的代码,都是基本实现
弹性士兵:
$('.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>
将magnificPopup
放在flexSlider
之前
$('.popup-link').magnificPopup({
type: 'image',
gallery:{enabled:true}
});
$('.slideTwo').flexslider({
animation: "slide",
controlNav: true,
directionNav: false,
animationLoop: true,
slideshow: false
});
这是一个 DEMO
我正在使用 flexslider 进行一些图像旋转,现在需要使用此幻灯片放映实现弹出式画廊,即,当用户单击滑块内的活动幻灯片时,想要在灯箱中显示为画廊。
所以我尝试合并 'magnificPopup',它有效,但问题是它获取了幻灯片的所有实例,也就是说,如果我在滑块中有 2 张图像,我将在弹出式画廊中获得 4 张,即,magnificpopup 获取所有实例,包括 'clones',那么我该如何解决这个问题,有没有其他方法,或者我可以使用的插件或回调函数?下面是我试过的代码,都是基本实现
弹性士兵:
$('.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>
将magnificPopup
放在flexSlider
之前
$('.popup-link').magnificPopup({
type: 'image',
gallery:{enabled:true}
});
$('.slideTwo').flexslider({
animation: "slide",
controlNav: true,
directionNav: false,
animationLoop: true,
slideshow: false
});
这是一个 DEMO