问题描述
我目前正在处理一个网页并尝试实施 Lightgallery。尽管图片库对我来说完全正常,但视频似乎无法播放。 当我检查控制台时,加载站点时显示以下错误消息:
<Uncaught TypeError: $.fn.lightgallery is undefined
<anonymous> http://localhost/js/lg-video.js:352
<anonymous> http://localhost/js/lg-video.js:354
<anonymous> http://localhost/js/lg-video.js:17
<anonymous> http://localhost/js/lg-video.js:19
我对使用 Lightgallery 还很陌生,因为我不是“专家”编码员,因此我还没有发现 JavaScript 文件中的问题是什么。
我使用 lg-video plugin website 中的代码片段对其进行了测试:
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
...
</head>
<body>
<script src="js/lightgallery.js"></script>
<script src="js/lg-video.js"></script>
<div id="lightgallery">
<a href="https://www.youtube.com/watch?v=meBbDqAXago" data-poster="video-poster1.jpg" >
<img src="img/thumb1.jpg" /></a>
</div>
<script>
lightgallery(document.getElementById('lightgallery'));
</script>
</body>
解决方法
Here's a working JSFiddle。这就是我所做的,通过 the installation page I referenced yesterday:
-
从“包含 CSS 和 Javascript 文件”部分开始,他们说要包含
lightgallery.css
,但他们没有提供链接。我搜索了 found a CDN link,并添加了 ; -
复制并添加了 the 'jsdelivr collection' link for the Lightgallery JS;
-
复制他们显示的 JS 以启动插件;
-
复制了 HTML 代码段的相关部分 - 只是
lightgallery
div,并进行了一些小更新:- 当然,这里既不存在
video-poster1.jpg
也不存在img/thumb1.jpg
,所以我用占位符图像替换了它们; - 我收到该视频的“视频不可用”,所以我随机选择了另一个;
- 当然,这里既不存在
这很好用 - 显示占位符缩略图,当我点击它时,视频会在黑色背景下打开,如果我点击播放,就会播放。代码如下:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/css/lightgallery.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/combine/npm/lightgallery,npm/lg-zoom"></script>
</head>
<body>
<div id="lightgallery">
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" data-poster="https://via.placeholder.com/150"><img src="https://via.placeholder.com/150" /></a>
</div>
<script>
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
</script>
</body>
</html>