Question

我无法通过此链接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/（向下滚动）。

Answer 1

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

“ReferenceError：未定义jQuery”。

然后我调查了你的代码并注意到你正在调用<head>中的SimpleLightBox插件，而jquery库是在页面末尾调用的（就在</body>标记之前）。

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

执行以下操作以解决问题：

1）这将修复加载jQuery后初始化库的问题。将以下行放在</body>标记之前。

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

2）这将修复加载simpleLightBox插件后正在执行的方法。在上面的行之后移动以下代码（并添加ready函数）：

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

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

SimpleLightBox不会运行

1 个答案: