Dynamic Items - Thumbnails not clickable, HTML5 Videos not working

[waynehaffenden]

I'm having major problems trying to get light gallery using dynamic items to make HTML5 videos work at all. I'm also having an issue where thumbnails are displaying but clicking them does nothing - no errors in the console either. I have spent way too much time on this, hoping it's something stupid I'm missing. I load lightGallery via CDN including CSS bundle and both plugin files. Light gallery opens, shows the video poster but clicking the play icon does nothing. Thumbnails show but clicking does nothing - this issues could be linked!? If I remove the video from the array, the thumbnails are still not clickable. I would really appreciate some help, thank you.

  const GALLERY_FILES = [
{
  src: 'http://localhost/image/original.jpg',
  thumb: 'http://localhost/image/thumbnail.jpg',
},
{
  video: 'http://localhost/video/video.mp4',
  poster: 'http://localhost/video/thumbnail.jpg',
  thumb: 'http://localhost/video/thumbnail.jpg',
}
];
  const lightbox = lightGallery($gallery, {
    licenseKey: 'REMOVED',
    dynamic: true,
    animateThumb: true,
    plugins: [lgThumbnail, lgVideo],
    dynamicEl: GALLERY_FILES,
  });

[sachinchoolur]

Hey @waynehaffenden,

For HTML5 videos, you need to pass the video source via video key.

Docs - https://www.lightgalleryjs.com/demos/video-gallery/#html5-videos Demo - https://codepen.io/sachinchoolur/pen/VwpYagE

The below code should work fine for you

const GALLERY_FILES = [
{
  src: 'http://localhost/image/original.jpg',
  thumb: 'http://localhost/image/thumbnail.jpg',
},
{
  video: {"source": [{"src":"http://localhost/video/video.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}},
  poster: 'http://localhost/video/thumbnail.jpg',
  thumb: 'http://localhost/video/thumbnail.jpg',
}
];
  const lightbox = lightGallery($gallery, {
    licenseKey: 'REMOVED',
    dynamic: true,
    animateThumb: true,
    plugins: [lgThumbnail, lgVideo],
    dynamicEl: GALLERY_FILES,
  });

Let me know if you face any issues

[waynehaffenden]

Hey @sachinchoolur

Thank you for the very quick and prompt response! Strangely, I'm still getting the same issues regardless of what I try:

I have tried both 2.3.0 and the new 2.4.0-beta releases, I've tried loading scripts via CDN and now running locally. Can confirm using the network tab that all lightGallery CSS/JS/Plugins are loaded correctly.

I now am using the same code from the Codepen demo:

  const gallery = lightGallery($gallery, {
    licenseKey: ApiSettings.galleryLicense,
    plugins: [lgVideo, lgThumbnail],
    dynamic: true,
    dynamicEl: [
      {
        src: 'https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1400&q=80',
        responsive:
          'https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=480&q=80 480, https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=800&q=80 800',
        thumb:
          'https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80',
        subHtml: `<div class="lightGallery-captions">
                  <h4>Photo by <a href="https://unsplash.com/@brookecagle">Brooke Cagle</a></h4>
                  <p>Description of the slide 1</p>
              </div>`,
      },
      {
        video: {
          source: [{ src: 'https://www.lightgalleryjs.com//videos/video1.mp4', type: 'video/mp4' }],
          attributes: { preload: false, controls: true },
        },
        thumb: 'https://www.lightgalleryjs.com//images/demo/html5-video-poster.jpg',
        subHtml: `<div class="lightGallery-captions">
                  <h4>Photo by <a href="https://unsplash.com/@brookecagle">Brooke Cagle</a></h4>
                  <p>Description of the slide 2</p>
              </div>`,
      },
      {
        src: 'https://images.unsplash.com/photo-1477322524744-0eece9e79640?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80',
        responsive:
          'https://images.unsplash.com/photo-1477322524744-0eece9e79640?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=480&q=80 480, https://images.unsplash.com/photo-1477322524744-0eece9e79640?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80 800',
        thumb:
          'https://images.unsplash.com/photo-1477322524744-0eece9e79640?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80',
      },
      {
        src: '//www.youtube.com/watch?v=egyIeygdS_E',
        poster: 'https://img.youtube.com/vi/egyIeygdS_E/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/egyIeygdS_E/maxresdefault.jpg',
      },
    ],
  });

Then I have a button with a standard click handler which calls gallery.openGallery(0). The gallery opens, the close and previous/next buttons work as expected, I see all the thumbnails, poster and images. However, clicking on thumbnails does nothing, clicking on play for the video, also does nothing!

The only thing I've noticed is I receive in the console is:

lightgallery.min.js?ver=5.8.2:8 lightGallery:- make sure lightGallery module is properly initiated

I get this twice, assuming once for each "plugin", if I remove the plugins from the above settings these errors go away! So assuming the two plugins (clearly the bits not working) aren't being properly initialised or assume that lightGallery itself isn't! I have triple checked the order the scripts load in and lightGallery definitely is loaded first!

Any ideas?

Thank you so much for your time, this is going to be something incredibly simple, I'm sure of it!

[sachinchoolur]

Yes, this should be some simple issue. Do you have an online demo URL that I can take a look at?

[waynehaffenden]

@sachinchoolur Thank you, I hope you had a great Christmas! I've decided to remove the thumbnails now, so it's just the video plugin that isn't working - although, no doubt the same issue. The link is here with the PIN 7461 (It's just a test gallery so doesn't matter sharing this publicly on here :)) Thank you for your time.

[sachinchoolur]

Can you please make sure that the $gallery is an HTMLElement? I'm not exactly sure as the code is minified on the website. But it looks like $gallery is a jQuery object

If that is the case, you need to fetch the native DOM element from jQuery object and pass it via lightGallery.

use $gallery[0] to get the DOM element

The below code should work fine.

 const gallery = lightGallery($gallery[0], {
    licenseKey: ApiSettings.galleryLicense,
    plugins: [lgVideo, lgThumbnail],
    dynamic: true,
    dynamicEl: [
      {
        src: 'https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1400&q=80',
        responsive:
          'https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=480&q=80 480, https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=800&q=80 800',
        thumb:
          'https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80',
        subHtml: `<div class="lightGallery-captions">
                  <h4>Photo by <a href="https://unsplash.com/@brookecagle">Brooke Cagle</a></h4>
                  <p>Description of the slide 1</p>
              </div>`,
      },
      {
        video: {
          source: [{ src: 'https://www.lightgalleryjs.com//videos/video1.mp4', type: 'video/mp4' }],
          attributes: { preload: false, controls: true },
        },
        thumb: 'https://www.lightgalleryjs.com//images/demo/html5-video-poster.jpg',
        subHtml: `<div class="lightGallery-captions">
                  <h4>Photo by <a href="https://unsplash.com/@brookecagle">Brooke Cagle</a></h4>
                  <p>Description of the slide 2</p>
              </div>`,
      },
      {
        src: 'https://images.unsplash.com/photo-1477322524744-0eece9e79640?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80',
        responsive:
          'https://images.unsplash.com/photo-1477322524744-0eece9e79640?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=480&q=80 480, https://images.unsplash.com/photo-1477322524744-0eece9e79640?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80 800',
        thumb:
          'https://images.unsplash.com/photo-1477322524744-0eece9e79640?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80',
      },
      {
        src: '//www.youtube.com/watch?v=egyIeygdS_E',
        poster: 'https://img.youtube.com/vi/egyIeygdS_E/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/egyIeygdS_E/maxresdefault.jpg',
      },
    ],
  });

Let me know if it works

[waynehaffenden]

@sachinchoolur You sir, are a genius! I can't believe it was as simple as that - it threw me off, as passing the jQuery object, lightGallery was still working properly, it was just that one thing that wasn't behaving correctly. If passing the jQuery object meant that lightGallery wasn't working at all I would have caught it! Knew it'd be something simple, thank you so much for your time. Happy new year!

[sachinchoolur]

lightGallery has jQuery-like utilities for dom-manipulation and even management. That is why it was working for image slides. I think I should either throw an error when a non HTML element is passed via lightGallery or make it jQuery compatible completely. Thank you for pointing this out. Happy new year!