javascript - baguetteBox.js 不起作用并在页面底部显示控件
问题描述
我在两个不同页面的网站中使用 baguetteBox.js:
- 主页
- 画廊
在图库中它运行良好,但在主页中我找不到为什么灯箱控件(即id="baguetteBox-overlay"
:)出现在网页底部,如下所示:
在这两个网页中,我正在加载相同的资产,并且控制台没有显示任何错误。
您可以在以下位置看到它:
- 主页: http: //keraban.marcanuy.com <- 有问题的那个
- 画廊: http: //keraban.marcanuy.com/gallery/
使用 _baguettebox.js/1.10.0(也使用 Bootstrap 4)
知道如何解决吗?
相关代码:
在首页,
<section class="gallery-block compact-gallery">
<div class="container">
<div class="row no-gutters">
<div class="col-md-6 col-lg-4 item zoom-on-hover">
<a class="lightbox" href="/media/images/image5.width-1400.jpg">
<img class="img-fluid image" src="/media/images/image5.width-1400.jpg">
<span class="description">
<span class="description-heading">Image 5</span>
</span>
</a>
</div>
<div class="col-md-6 col-lg-4 item zoom-on-hover">
<a class="lightbox" href="/media/images/image1.width-1400.jpg">
<img class="img-fluid image" src="/media/images/image1.width-1400.jpg">
<span class="description">
<span class="description-heading">Image 1</span>
</span>
</a>
</div>
....
</div>
</div>
</section>
在底部加载js:
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js"></script>
<script>
baguetteBox.run('.compact-gallery', {
animation: 'slideIn',
});
</script>
解决方案
基本样式表丢失并导致对话框出现,添加正确的样式表可以修复它<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" />
。
推荐阅读
- javascript - 使用 ES6 语法解析编译的默认导出
- vuex - Quasar 框架与 VueX
- c# - 如何在 C# 中合并 Excel 包工作表的单元格?
- python - 如果单元格数据与不同 CSV 文件中的另一个单元格匹配,我如何返回单元格行?Python
- java - 如何将唯一数据从 excel 存储到数据库(使用 apache poi)?
- haskell - 括号中逗号分隔的名称是什么意思 - 作为绑定?
- javascript - AmCharts4 比 3 慢很多
- user-interface - JavaFX ChoiceBox 不显示初始值
- docker - 为什么 macos(x86) 可以运行 docker arm 容器 arm64v8/alpine?
- blazor - 为什么 Blazor 中的 CSS 隔离不起作用?