灯箱根本不起作用
Lightboxes doesn't work at all
我尝试在虚拟机本地托管的网站上包含一个灯箱。
但无论我如何挣扎,即使通过检索可在网络上使用的代码,也没有人适合我。
我测试过:
- 灯箱 V2
- 花式盒子
- iLightBox
我什至在没有通过 Apache 服务器的情况下直接在本地进行了测试,但没有任何效果。我完全迷路了...
以防万一,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>
对 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>
更新
已解决,多谢帮助:)
Download 从这里开始。将此文件保存在示例文件夹中。它正在工作。我认为你应该删除 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>
由于 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>
为什么它一开始就不起作用? Because the lightbox was triggered before the markup was loaded.
Include the Javascript at the bottom of your page before the closing </body>
tag.
Make sure jQuery, which is required by Lightbox, is also loaded.
我尝试在虚拟机本地托管的网站上包含一个灯箱。
但无论我如何挣扎,即使通过检索可在网络上使用的代码,也没有人适合我。
我测试过:
- 灯箱 V2
- 花式盒子
- iLightBox
我什至在没有通过 Apache 服务器的情况下直接在本地进行了测试,但没有任何效果。我完全迷路了...
以防万一,HTML 测试之一,发现
<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>
更新
已解决,多谢帮助:)
Download 从这里开始。将此文件保存在示例文件夹中。它正在工作。我认为你应该删除 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>
由于 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>
为什么它一开始就不起作用? Because the lightbox was triggered before the markup was loaded.
Include the Javascript at the bottom of your page before the closing
</body>
tag.Make sure jQuery, which is required by Lightbox, is also loaded.