LightGallery Video Plugin won't work (undefined $)

Question

I am currently working on a webpage and tried implementing LightGallery. Although the image galleries work totally fine for me the videos won't seem to play. When I check the console the following error message is displayed upon loading the site:

<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

I am fairly new to using LightGallery and to finding out, what the problem in a JavaScript file is since I am not an 'expert' coder.

I used the code snippet from the lg-video plugin website to test it out:

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

From the link you posted, I clicked on "Docs", then "Installation", then scrolled down to compare what you've posted with what they show. The "Call the plugin" section shows where your problem is. https://sachinchoolur.github.io/lightGallery/docs/#call-the-plugin — Don't Panic, Apr 29 '21 at 06:10
Unfortunately when doing as the "Call the plugin" section shows the whole light gallery won't work anymore. Before it did, but the video just didn't play :/ Also a new error pops up: Uncaught reference error: $ is undefined (this links to the line where I call "$(document).ready(function() { ..." — Asiimate, Apr 29 '21 at 10:06
"*gallery won't work anymore*" - why not? What happens? "*Uncaught reference error: $ is undefined*" is about the most common jQuery error you will find, and indicates jQuery is not loaded. Triple check your code against each step of that installation page. — Don't Panic, Apr 29 '21 at 10:16
"gallery won't work anymore" -> The video and thumbnails now just become clickable images that open the original image when clicked. I revisited the page and saw, that they do not call jQuery in the header, but instead call it right before the lightgallery and via a local file. Now the error "lightgallery is not a function" was thrown. I stumbled upon this thread: https://stackoverflow.com/questions/39665631/uncaught-typeerror-lightgallery-is-not-a-function . When replacing my lightgallery.js and lightgaller.css with the cdn-links lightgallery worked again, but the video still wouldn't play. — Asiimate, Apr 29 '21 at 10:39
I also replaced my lg-video.js with the cdn-link to it, but that still didn't manage to get it working right — Asiimate, Apr 29 '21 at 10:40

Don't Panic · Accepted Answer · 2021-04-30T07:12:55.890

Here's a working JSFiddle. Here's what I did, working through the installation page I referenced yesterday:

Starting in the "Include CSS and Javascript files" section, they say to include lightgallery.css, though they don't give a link for it. I searched and found a CDN link, and added that ;
Added a CDN link to the latest jQuery;
Copied and added the 'jsdelivr collection' link for the Lightgallery JS;
Copied the JS they show to initiate the plugin;
Copied the relevant part of your HTML snippet - just the lightgallery div, with some minor updates:
- Neither video-poster1.jpg nor img/thumb1.jpg exist here of course, so I replaced them with placeholder images;
- I get "Video unavailable" for that video, so I randomly picked another;

This works fine - the placeholder thumbnail is shown, when I click it the video opens against a black background, and plays if I click play. Here's the code:

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

Thanks alot, this worked for me now! Apparently it had something to do with the jsDelivr collection then :) — Asiimate, Apr 30 '21 at 13:48

LightGallery Video Plugin won't work (undefined $)

1 Answers1