LightGallery 视频插件不起作用（未定义 $）答案

【问题标题】：LightGallery Video Plugin won't work (undefined $)LightGallery 视频插件不起作用（未定义 $）
【发布时间】：2021-04-29 06:02:19
【问题描述】：

我目前正在开发一个网页并尝试实施 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 中的代码 sn-p 进行了测试：

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

【问题讨论】：

从您发布的链接中，我点击了“文档”，然后点击了“安装”，然后向下滚动以将您发布的内容与他们显示的内容进行比较。 “调用插件”部分显示了您的问题所在。 sachinchoolur.github.io/lightGallery/docs/#call-the-plugin
不幸的是，当“调用插件”部分显示整个灯光库不再工作时。在它之前，但视频只是没有播放：/还会弹出一个新错误：未捕获的引用错误：$未定义（这链接到我调用的行“$（document）.ready（function（）{。 ..”
“画廊将不再工作” - 为什么不呢？发生什么了？ “未捕获的引用错误：$ is undefined”是您会发现的最常见的 jQuery 错误，它表示未加载 jQuery。针对该安装页面的每个步骤对您的代码进行三次检查。
"gallery won't work again" -> 视频和缩略图现在变成可点击的图片，点击后会打开原始图片。我重新访问了该页面并看到，他们没有在标题中调用 jQuery，而是在 lightgallery 之前并通过本地文件调用它。现在抛出错误“lightgallery is not a function”。我偶然发现了这个线程：stackoverflow.com/questions/39665631/…。当用 cdn-links 替换我的 lightgallery.js 和 lightgaller.css 时，lightgallery 再次工作，但视频仍然无法播放。
我也将我的 lg-video.js 替换为指向它的 cdn-link，但这仍然无法使其正常工作

标签： javascript lightgallery

【解决方案1】：

Here's a working JSFiddle。这就是我所做的，通过the installation page I referenced yesterday：

从“包含 CSS 和 Javascript 文件”部分开始，他们说要包含 lightgallery.css，尽管他们没有给出链接。我搜索并found a CDN link，并补充说；
已添加a CDN link to the latest jQuery；
复制添加the 'jsdelivr collection' link for the Lightgallery JS;
复制他们展示的JS来启动插件；
复制了您的 HTML sn-p 的相关部分 - 只是 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-autoplay,npm/lg-fullscreen,npm/lg-hash,npm/lg-pager,npm/lg-share,npm/lg-thumbnail,npm/lg-video,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>

【讨论】：

非常感谢，这对我有用！显然它与 jsDelivr 集合有关:)