gpt4 book ai didi

javascript - SimpleLightBox 不会运行

转载 作者:太空宇宙 更新时间:2023-11-04 01:26:15 25 4
gpt4 key购买 nike

我无法从此链接 http://dbrekalo.github.io/simpleLightbox/ 运行 SimpleLightBox(单击图像后它在空白页上作为常规图像打开) .但我有问题。我添加了 JS 和 CSS 文件(我可以正确地在源代码中打开它)。然后我在代码中添加了 HTML 和 JS。

  <div class="imageGallery1">
<a href="images/5x5.jpg" title="Caption for gallery item 1" ><img style="width: 300px; height: 300px" src="images/5x5.jpg" alt="Gallery image 1"/></a>
<a href="images/BG-BR5.jpg" title="Caption for gallery item 2"><img style="width: 300px; height: 300px" src="images/BG-BR5.jpg" alt="Gallery image 2" /></a>
<a href="images/BG-BR6.jpg" title="Caption for gallery item 3"><img style="width: 300px; height: 300px"src="images/BG-BR6.jpg" alt="Gallery image 3" /></a>
</div>
<script>$('.imageGallery1 a').simpleLightbox();</script>

图像插入正确,我也有 jquery,因为我使用的是 bootstrap 4。这是我正在处理的模板的链接 https://vitas.sk/1/ (向下滚动)。

最佳答案

当我检查你的模板页面时,我注意到控制台中的错误

"ReferenceError: jQuery is not defined".

然后我调查了您的代码,发现您正在调用 <head> 中的 SimpleLightBox 插件。 , 而在页面末尾调用 jquery 库(就在 </body> 标记之前)。

发生的事情是在 jQuery 库初始化之前执行 SimpleLightBox 插件。

执行以下操作来解决问题:

1) 这将修复加载 jQuery 后正在初始化的库。将以下行放在 </body> 之前标签。

<script src="js/simpleLightbox.js" ></script>

2) 这将修复加载 simpleLightBox 插件后执行的方法。将以下代码(并添加 ready 函数)移到上面一行之后:

$(document).ready(function() {
$('.imageGallery1 a').simpleLightbox();
});

我添加了 $(document).ready();围绕代码以确保在整个页面及其脚本加载完成时执行代码。

关于javascript - SimpleLightBox 不会运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48043614/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com