我使用的是 fancybox 3.3.5，我设置了一些选项，但它们似乎不适用。这是我的 HTML/CSS:
HTML(编辑包括用于测试的 CDN 和占位符图像):
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
<body>
<div class="container">
<div class="row">
<div class="gallery_product col-lg-4 col-md-6 col-sm-6 col-xs-12 ">
<a href="http://via.placeholder.com/350x150" data-fancybox="gallery">
<img src="http://via.placeholder.com/360x150" width="360" />
</a>
</div>
</div>
</div>
</body>
选项:
<script type="text/javascript">
$(document).ready(function() {
$(".gallery").fancybox({
defaults = {
loop: true,
gutter: 25,
buttons: [
"fullScreen",
"download",
"thumbs",
"close"
],
idleTime: 10,
}
});
});
</script>
最佳答案
您只需将 $(".gallery") 替换为正确的选择器，因为该选择器不会返回任何元素，并且会应用默认值。
因此，将 $(".gallery") 更改为 $('[data-fancybox="gallery"]')
关于javascript - FancyBox 3.3.5 选项不适用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51219901/