简体   繁体   中英

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.

您似乎缺少 lightgallery 的脚本标签

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.2.4/js/lightgallery.min.js"></script>
    $(document).ready(function() {    
        $('#video-gallery').lightGallery({
            videojs: true
        }); 
    });

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM