Question

我目前正在尝试将灯箱应用到我的网站上，但我无法让它工作，我认为没有任何冲突，我已将所有文件放在正确的位置并将它们链接起来它如何告诉你在灯箱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>

位于页面底部，就在关闭正文标记之前。

lightbox.css位于css目录中 lightbox.js位于js目录中

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

以上就是我所有的图像标记。

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

提前致谢

Answer 1

问题在于您使用的是img代码，他们明确表示要使用a个锚。

对我来说，它的工作就像一个魅力：

＆＃13;

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

＆＃13;

Answer 2

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

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

灯箱工作不正常

2 个答案: