javascript - Lightbox2 未启动

Question

好吧，我认为需要几分钟才能实现的内容现在已经占用了我一个多小时的时间，我完全感到困惑。

我下载了lightbox2 , 按照说明进行操作；将他们的 CSS 和 JS 嵌入到我的 index.html 的头部

<link href="lightbox/lightbox.css" rel="stylesheet">
<script src="lightbox/lightbox-plus-jquery.js"></script>

如果有任何不同，我只会在本地主机上进行测试。路径设置正确 100%，CSS 要求的 4 个图像的路径也是如此。

现在在我的 body 里，我正在像这样使用带有 data-lightbox 属性的 href

<a class="example-image-link" href="gallery/i1.jpg" data-lightbox="group" data-title="Optional caption.">
    <img class="example-image" src="gallery/i1.jpg" alt="desc">
</a>
<a class="example-image-link" href="gallery/i2.jpg" data-lightbox="group" data-title="Optional caption.">
    <img class="example-image" src="gallery/i2.jpg" alt="desc">
</a>

页面上没有其他内容，因此结果如下所示:

问题是，当我点击其中一张图片时，灯箱并没有弹出图片，而是在全屏选项卡中打开了图片。就好像灯箱根本不起作用，它只是按照 a href 到图像。我什至尝试了 JSFiddle 并加载了相同的 CSS 和 JS 作为外部资源，它正在做完全相同的事情。自己看-> JSFIDDLE

我愿意接受任何想法。真的不明白我错过了什么。

Answer 1

你应该移动 <script src="lightbox/lightbox-plus-jquery.js"></script>位到你的 body 的末尾HTML 中的标记，而不是 head .问题是如果脚本在头部，它会在图像准备好被库解析之前运行。