LightGallery 视频插件将无法工作 (undefined $)

LightGallery Video Plugin won't work (undefined $)

我目前正在制作网页并尝试实施 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 文件中的问题是什么还很陌生,因为我不是 'expert' 编码员。

我使用 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. Here's what I did, working through the installation page I referenced yesterday:

  1. 从“包含 CSS 和 Javascript 文件”部分开始,他们说要包含 lightgallery.css,尽管他们没有给出 link 为它。我搜索并 found a CDN link,并添加了 ;

  2. 已添加a CDN link to the latest jQuery

  3. 复制并添加the 'jsdelivr collection' link for the Lightgallery JS;

  4. 复制了他们显示的启动插件的JS;

  5. 复制了您的 HTML 片段的相关部分 - 只是 lightgallery div,并进行了一些小的更新:

    • 当然video-poster1.jpgimg/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>