CODEWITHSUNDEEP
javascriptjqueryvideo.js
Kichu
Kichu

Reputation: 1731

video gallery getting Uncaught TypeError: $(...).lightGallery is not a function

I am using video.js for my video gallery. I tried video.js but I am getting the following error message.

Uncaught TypeError: $(...).lightGallery is not a function My code:

<html>
<head>
    <link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://vjs.zencdn.net/4.12/video.js"></script>
</head>

<body>
    <!-- Hidden video div -->
    <div style="display:none;" id="video1">
        <video class="lg-video-object lg-html5 video-js vjs-default-skin" controls preload="none">
            <source src="videos/test1.mp4" type="video/mp4">
             Your browser does not support HTML5 video.
        </video>
    </div>
    <div style="display:none;" id="video2">
        <video class="lg-video-object lg-html5 video-js vjs-default-skin" controls preload="none">
            <source src="videos/test2.mp4" type="video/mp4">
             Your browser does not support HTML5 video.
        </video>
    </div>

    <!-- data-src should not be provided when you use html5 videos -->
    <ul id="video-gallery">
      <li data-poster="video-poster1.jpg" data-sub-html="video caption1" data-html="#video1" >
          <img src="1.jpg" />
      </li>
      <li data-poster="video-poster2.jpg" data-sub-html="video caption2" data-html="#video2" >
          <img src="2.jpg" />
      </li>
      ...
    </ul>


</body>
<script>
    $('#video-gallery').lightGallery({
        videojs: true
    }); 

</script>

</html>

please suggest the solution.

Upvotes: 2

Views: 3872

Answers (3)

BasTaller
BasTaller

Reputation: 810

Strange thing, but the current version could be initialized only this way (typical JQuery syntax doesn't work): 

lightGallery($('#video-thumbnails')[0], {
    download: false,
    //other options
});

There is even opened Issue on Github: https://github.com/sachinchoolur/lightgallery.js/issues/42

Upvotes: 0

Juha Tauriainen
Juha Tauriainen

Reputation: 1611

You seem to be missing the script tag for lightgallery

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.4/js/lightgallery.min.js"></script>

Upvotes: 2

OsYYYY
OsYYYY

Reputation: 253

    $(document).ready(function() {    
        $('#video-gallery').lightGallery({
            videojs: true
        }); 
    });

Upvotes: 0

Related Questions