灯箱根本不管用

时间：2020-12-18 15:15:25

I try to include a lightbox on my site hosted locally on a virtual machine.

我尝试在我的站点上包含一个安装在虚拟机上的lightbox。

But no matter how I'm struggling, even by retrieving codes that work on the web, no one works for me.

但无论我如何挣扎，即使是通过检索网络上的代码，也没有人适合我。

I tested :

我测试:

  • Lightbox V2
  • Lightbox V2
  • Fancybox
  • Fancybox
  • iLightBox
  • iLightBox

I even tested while local directly without going through an Apache server, but nothing works. I'm completely lost...

我甚至在没有通过Apache服务器的情况下直接在本地进行测试，但是没有任何东西可以工作。我完全失去了……

In case, one of the HTML tested, found here (Lightbox V2) :

如果有一个HTML测试，在这里找到(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>

Doesn't work at all on a file like test.html. Some jQuery scripts that I already use (such for tabs) work, but not for the lightbox.

在像test.html这样的文件上根本不起作用。我已经使用过的一些jQuery脚本(比如制表符)工作，但不是用于lightbox。

This is what I'm getting in Chrome's console : Resource interpreted as Document but transferred with MIME type image/jpeg. Nothing in Firefox's console and even Firebug.

这就是我在Chrome控制台得到的:资源被解释为文档，但是用MIME类型的图像/jpeg传输。火狐的控制台里什么都没有，甚至连Firebug都没有。

Thanks for your help.

谢谢你的帮助。

Update

This is the full HTML :

这是完整的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>

Update

Solved, thanks to helpers :)

解决了，感谢帮手:)

2 个解决方案

#1

2  

As lightbox is a JQuery plugin, first JQuery must be included in your snippet, and then lightbox.

由于lightbox是JQuery插件，所以必须首先将JQuery包含在您的代码片段中，然后再将lightbox包含在其中。

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

Why it didn't work in the first place? Because the lightbox was triggered before the markup was loaded.

为什么它一开始就不起作用呢?因为在加载标记之前触发了lightbox。

Even in the documentation it says:

甚至在文件中它说:

  • Include the Javascript at the bottom of your page before the closing </body> tag.

    在关闭标记之前，在页面底部包含Javascript。

  • Make sure jQuery, which is required by Lightbox, is also loaded.

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

#2

1  

Download from here. Keep this file in examples folder. It was working. I think you should remove jquery.min and lightbox js

从这里下载。将此文件保存在“示例”文件夹中。这是工作。我认为您应该删除jquery。最小值和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>

#1

2  

As lightbox is a JQuery plugin, first JQuery must be included in your snippet, and then lightbox.

由于lightbox是JQuery插件，所以必须首先将JQuery包含在您的代码片段中，然后再将lightbox包含在其中。

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

Why it didn't work in the first place? Because the lightbox was triggered before the markup was loaded.

为什么它一开始就不起作用呢?因为在加载标记之前触发了lightbox。

Even in the documentation it says:

甚至在文件中它说:

  • Include the Javascript at the bottom of your page before the closing </body> tag.

    在关闭标记之前，在页面底部包含Javascript。

  • Make sure jQuery, which is required by Lightbox, is also loaded.

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

#2

1  

Download from here. Keep this file in examples folder. It was working. I think you should remove jquery.min and lightbox js

从这里下载。将此文件保存在“示例”文件夹中。这是工作。我认为您应该删除jquery。最小值和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>
标签：

相关文章