灯箱不能正常工作

Lightbox isn't working properly

本文关键字：工作 常工作 不能      更新时间：2023-09-26

我目前正试图在我的网站上实现lightbox，但我不能让它工作，我不认为有任何与它相冲突的地方，我已经把所有的文件放在正确的位置，并将它们链接在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>

位于页面底部，就在结束正文标签之前。

lightbox.css在CSS目录中Lightbox.js在js目录

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

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

我不知道为什么它不工作。我已经把文件上传到服务器上，它也不能在那里工作。

Thanks in advance

问题是你正在使用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>

文档中说使用<a>(锚标记)来触发灯箱。

<li>
  <a href="images/1.png" data-lightbox="image-1">
    <img src="images/1.png" />
  </a>
</li>
相关文章：