我结合使用了 Slick Slider 和 Magnific。
光滑的 slider 处于无限循环状态并包含多个图像, slider 作为一个整体是一个放大画廊。
Slick 克隆元素以创建无限循环效果,并将“slick-cloned”类添加到克隆元素中,我需要从我的 Magnific 画廊中忽略这些克隆元素。
不过,我正在努力寻找有关动态忽略图库中的元素的任何文档。有人有主意吗?
我尝试过使用如下所示的委托(delegate),但这根本无法获取任何内容。
$('.container').magnificPopup({
delegate: '.module:not(.slick-cloned) .gal-test',
type:'image'
});
我的 HTML 结构
<div class='container'>
<div class='slider-wrap'>
<div class='slick-slider'>
<div class='module'><a href='image.jpg' class='gallery gal-test'><img src='' /></a></div>
<div class='module'><a href='image.jpg' class='gallery gal-test'><img src='' /></a></div>
</div>
</div>
</div>
谢谢, 院长
最佳答案
作为快速修复,关闭无限滚动。
真正的问题是由于循环遍历每个画廊并将“容器”重新分配给放大的弹出窗口而引起的。解决方案是在每个模块周围创建另一个级别的容器。
关于javascript - 华丽的弹出窗口 - 忽略图库中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31473168/