Question

我尝试在我的虚拟机本地托管的网站上加入一个灯箱。

但无论我如何挣扎，即使检索网络上的代码，也没有人能为我工作。

我测试过：

Lightbox V2
的fancybox
iLightBox

我甚至直接在本地测试而不通过Apache服务器，但没有任何作用。我完全失去了......

如果是其中一个HTML测试，找到here（Lightbox V2）：

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

在test.html等文件上根本不起作用。我已经使用的一些jQuery脚本（例如标签）可以工作，但不适用于灯箱。

这就是我在Chrome控制台中获得的内容：Resource interpreted as Document but transferred with MIME type image/jpeg。在Firefox的控制台甚至Firebug中都没有。

感谢您的帮助。

更新

这是完整的HTML：

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="plugins/lightbox/js/lightbox.js"></script>
        <title>Test</title>
        <link href="plugins/lightbox/css/lightbox.css" rel="stylesheet">
    </head>
    <body>
        <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>
    </body>
</html>

更新

解决，感谢帮助者：）

Answer 1

由于lightbox是一个JQuery插件，首先JQuery必须包含在你的代码段中，然后是灯箱。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link href="plugins/lightbox/css/lightbox.css" rel="stylesheet">
</head>
<body>
    <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>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="plugins/lightbox/js/lightbox.js"></script>
</body>
</html>

为什么它首先不起作用？ Because the lightbox was triggered before the markup was loaded

即使在documentation it says：

在结束</body>代码之前在页面底部添加Javascript。



确保Lightbox所需的jQuery也已加载。

Answer 2

从这里

Download。将此文件保存在examples文件夹中。它工作正常。我认为你应该删除jquery.min和lightbox js

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <title>Lightbox Example</title>
  <link rel="stylesheet" href="../dist/css/lightbox.min.css">
</head>
<body>



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

  <script src="../dist/js/lightbox-plus-jquery.min.js"></script>

</body>
</html>

灯箱根本不起作用

更新

更新

2 个答案: