LightGallery 视频插件不起作用(未定义的 $)

我目前正在开发一个网页，并尝试实现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视频插件网站上的代码片段来测试它：

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

这是一个正在工作的JSFiddle。以下是我所做的，浏览我昨天提到的安装页面：

在"；包括CSS和Javascript文件"；部分，他们说包括lightgallery.css，尽管他们没有给出链接。我搜索并找到了一个CDN链接，并添加了它；
在最新的jQuery中添加了CDN链接；
复制并添加了Lightgallery JS的"jsdelivr收藏"链接；
复制了他们展示的JS来启动插件；
复制了HTML片段的相关部分——只是lightgallerydiv，并进行了一些小的更新：
- 这里当然不存在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>

相关内容

最新更新

热门标签：