1

I'm using lightGallery to display a a collection of videos. In the docs, it says I can automatically load thumbnails from the video itself using some plugins. I've already included the required plugins with:

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

I'm trying to add my videos like so:

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

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

and in my app.js file, I have:

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

Nothing is working. I'm not sure how to get images from the videos. I'm not sure what to put in the HTML as well, since nothing is showing without images.

nyphur
  • 2,404
  • 2
  • 24
  • 48

1 Answers1

1

I just posted an answer to someone having almost the same problem (LightGallery Dailymotion) This is when you need to upload videos from resouced other than vimeo or youtube. If you intend to upload from these sites, skip the process of iframe src extraction and simply copy and paste the URL of your browser (the URL of that video in youTube for example) into the "data-src" value. and remove "data-iframe="true"" from div tag so your code should almost look like this one:

 $(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>
Star
  • 54
  • 2