javascript - Lightgallery 无法获取缩略图

Question

我正在使用 lightGallery 来显示视频集合。在文档中，它说我可以使用一些插件自动从视频本身加载缩略图。我已经包含了所需的插件:

<script src="/js/lightgallery.js"></script>
<script src="/js/lg-thumbnail.min.js"></script>
<script src="/js/lg-fullscreen.min.js"></script>
<script src="/js/lg-video.min.js"></script>
<script src="/js/app.js"></script>

我正在尝试像这样添加我的视频:

<div id="video-gallery">
   <a href="https://vimeo.com/141457148"></a>

   <a href="https://vimeo.com/104769168"></a>
</div>

在我的 app.js 文件中，我有:

 $(document).ready(function(){
  $('#video-gallery').lightGallery({
    loadVimeoThumbnail: true,
    vimeoThumbSize:'thumbnail_medium',
  });
})

没有任何效果。我不知道如何从视频中获取图像。我也不知道要在 HTML 中放入什么，因为没有图像就不会显示任何内容。

Answer 1

我刚刚向遇到几乎相同问题的人发布了答案(LightGallery Dailymotion)，这是当您需要从 vimeo 或 youtube 以外的资源上传视频时。如果您打算从这些网站上传，请跳过 iframe src 提取过程，只需将浏览器的 URL(例如 youTube 中该视频的 URL)复制并粘贴到“data-src”值中。并从 div 标签中删除“data-iframe="true"”，这样你的代码应该看起来像这样:

 $(document).ready(function(){
        $('.ep_lightGallery').lightGallery({
            selector: '#video-gallery',
            });
        });

    <div id="video-gallery" data-iframe="true" data-src="https://vimeo.com/104769168">
        <a href="'.$ThumbnailURL.'">
    </div>