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 张图像的路径也是如此..

现在在我的体内，我正在使用具有 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> 位移动到 HTML 中 body 标记的末尾，而不是 head。问题是如果脚本在头部，它会运行在图像准备好被库解析之前。

Lightbox2 未启动

Lightbox2 not initiating

html

javascript

jquery

lightbox2