javascript - 灯箱无法正常工作

Question

我目前正在尝试在我的网站上实现灯箱，但我无法让它工作，我认为没有任何冲突，我已将所有文件放在正确的位置并链接它们它如何在 lightbox 2 网站上告诉您。 ( http://lokeshdhakar.com/projects/lightbox2/ )

只是为了仔细检查:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet">

在head标签中，

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

位于页面底部，就在结束 body 标记之前。

lightbox.css在css目录下 lightbox.js在js目录下

<li><img src="images/1.png" data-lightbox="image-1" /></li>

以上是我所有图片标签的样子。

我不确定为什么它不起作用。我已将文件上传到服务器，但在那里也不起作用。

提前致谢

Answer 1

问题是您使用的是 img 标签，他们明确表示要使用 anchor a。

对我来说，它就像一个魅力:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.1/js/lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.1/css/lightbox.min.css" rel="stylesheet" />
<ul>
  <li>
    <a href="https://s-media-cache-ak0.pinimg.com/236x/d7/24/f9/d724f9e2e1a300dbdcb11b1d0491c884.jpg" data-lightbox="panda">Cute baby panda</a>
  </li>
  <li>
    <a href="https://s-media-cache-ak0.pinimg.com/236x/25/17/52/2517525a674d91b127938e55a72f0f12.jpg" data-lightbox="panda">Another</a>
  </li>
  <li>
    <a href="http://i.ytimg.com/vi/qfsRZsvraD8/hqdefault.jpg" data-lightbox="panda">Last one</a>
  </li>
</ul>