灯箱无法正常运作

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">

在头部标签中

<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标签，他们明确地说，使用锚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> 

Answer 2

该文档说使用<a> （锚标记）来触发灯箱。

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