lightGallery 一个视屏不播放解决方法

最新推荐文章于 2025-06-06 09:11:21 发布

weixin_30367945

最新推荐文章于 2025-06-06 09:11:21 发布

阅读量414

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/front-end-1149980941/p/6293438.html

本文介绍在使用lightGallery.js时遇到的单张图片模式下视频无法播放的问题及解决办法。通过修改源码中的一项判断条件，使得即使只有一个项目也能正常播放视频。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这次使用了lightGallery，感觉还不错。样式比较美观，并且支持响应式。

使用过程中，我遇到了下面的问题：

当我 .picsgallery里面只有一个 .gItem的时候。点击弹出幻灯片，再点击幻灯片中的截图，视屏就是不播放。

<div id="video-id2" style="display:none;">
    <video class="lg-video-object lg-html5 video-js vjs-default-skin" controls preload="none">
        <source src="video/785342048.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
</div>
<div class="picsgallery box clearfix">
    <a class="gItem" data-poster="images/pic_39.jpg" data-sub-html="先行版预告片1" data-html="#video-id1">
        <div class="bg" style="background-image:url(images/pic_39.jpg);"></div>
        <div class="com-play-button"><i class="fa fa-play-circle-o"></i></div>
    </a>
</div>

于是各种搜，搜不到。于是只能改js源码：

源码208行，有下面这串代码，将> 改成 >= 即可。

 1 if (_this.$items.length > 1) {
 2     _this.arrow();
 3 
 4     setTimeout(function() {
 5         _this.enableDrag();
 6         _this.enableSwipe();
 7     }, 50);
 8 
 9     if (_this.s.mousewheel) {
10         _this.mousewheel();
11     }
12 }