Javascript Lightbox2未启动

Javascript Lightbox2未启动,javascript,jquery,html,lightbox2,Javascript,Jquery,Html,Lightbox2,好吧,我原以为需要几分钟来实现的东西现在已经占用了我一个多小时的时间,我完全困惑了 我下载了,按照说明操作;将他们的CSS和JS嵌入my index.html的头部 <link href="lightbox/lightbox.css" rel="stylesheet"> <script src="lightbox/lightbox-plus-jquery.js"></script> 页面上没有其他内容,因此结果如下所示: 问题是,当我单击其中一个图像时,不

好吧,我原以为需要几分钟来实现的东西现在已经占用了我一个多小时的时间,我完全困惑了

我下载了,按照说明操作;将他们的CSS和JS嵌入my index.html的头部

<link href="lightbox/lightbox.css" rel="stylesheet">
<script src="lightbox/lightbox-plus-jquery.js"></script>
页面上没有其他内容,因此结果如下所示:

问题是,当我单击其中一个图像时,不是弹出灯箱,而是在全屏选项卡中打开图像。就像灯箱根本不工作一样,它只是跟随
a href
到图像。。我甚至尝试了JSFiddle,并加载了与外部资源相同的CSS和JS,它做了完全相同的事情。自己看看->


我愿意接受任何意见。。真的不明白我遗漏了什么。

你应该在HTML中将
位移到
正文
标记的末尾,而不是
。问题是,如果脚本在头部,它将在图像准备好由库解析之前运行。

对我来说似乎工作正常Codepen可能是加载脚本的方式?并且使用与我相同的源代码,对吗?这怎么可能呢?是的,使用你在jsfiddle@1cgonza中使用的相同的工具是有意义的,我自己刚刚发现。。。我发誓我读了5遍说明书,只有第6次我注意到上面写着“在结束标记之前在页面底部包含Javascript”真的很抱歉这篇文章……完美的解决方案。这是我发现的唯一有效的方法。
<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>