lightGallery 不加载图像

Question

我遇到此问题的页面是this one.

我尝试将静态 lightGallery JS 换成 CDNJS 版本，我尝试在 JS 和 jQuery 中调用该函数，我什至尝试在页眉和页脚中调用 lightGallery JS，但我仍然得到这个问题。

我已尝试搜索，但找不到任何对我来说相关且有效的答案的问题。

我以前使用过这个插件，但它似乎在周末坏了。我认为可能是 WordPress 更新损坏了它，但我无法回滚检查！

下面的代码示例：

$("#isotope-list").lightGallery();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/js/lightgallery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/css/lightgallery.css" rel="stylesheet" />

<ul id="isotope-list" class="small-block-grid medium-block-grid large-block-grid">

  <li class="ghentenaar item lazy" data-original="http://abbagoldeurope.com/wp-content/uploads/2014/02/ghent46-e1421310997505.jpg" height="150px" width="150px">
    <div class="gallery-inner">
      <img class="th" src="http://abbagoldeurope.com/wp-content/uploads/2014/02/ghent46-150x150.jpg" />
    </div>
  </li>
  <li class="ghentenaar item lazy" data-original="http://abbagoldeurope.com/wp-content/uploads/2014/02/ghent12-e1421311015711.jpg" height="150px" width="150px">
    <div class="gallery-inner">
      <img class="th" src="http://abbagoldeurope.com/wp-content/uploads/2014/02/ghent12-150x150.jpg" />
    </div>
  </li>
  <li class="ghentenaar item lazy" data-original="http://abbagoldeurope.com/wp-content/uploads/2014/02/ghent11-e1421311034730.jpg" height="150px" width="150px">
    <div class="gallery-inner">
      <img class="th" src="http://abbagoldeurope.com/wp-content/uploads/2014/02/ghent11-150x150.jpg" />
    </div>
  </li>
</ul>

<ul id="isotope-list" class="small-block-grid medium-block-grid large-block-grid" style="position: relative; height: 0px;">


<li data-src="https://www.youtube.com/watch?v=AW63bqMYkF4">
    <img src="https://img.youtube.com/vi/AW63bqMYkF4/default.jpg">
</li>


<li data-src="https://www.youtube.com/watch?v=JBzTx_3L57w">
    <img src="https://img.youtube.com/vi/JBzTx_3L57w/default.jpg">
</li>


<li data-src="https://www.youtube.com/watch?v=F6LpkwQe_RA">
    <img src="https://img.youtube.com/vi/F6LpkwQe_RA/default.jpg">
</li>                           
</ul>

我在控制台中得到的错误是TypeError: src is undefined。

提前致谢。

Answer 1

您的代码很好，唯一的问题是您没有 lightgallery 视频插件。

您应该调用 lightgallery 中包含的所有 JS 以使每个功能都正常工作：

<script src="js/lightgallery/lightgallery.js"></script>
<script src="js/lightgallery/lg-fullscreen.js"></script>
<script src="js/lightgallery/lg-thumbnail.js"></script>
<script src="js/lightgallery/lg-video.js"></script>
<script src="js/lightgallery/lg-autoplay.js"></script>
<script src="js/lightgallery/lg-zoom.js"></script>
<script src="js/lightgallery/lg-hash.js"></script>
<script src="js/lightgallery/lg-pager.js"></script>

这是一个添加视频插件的示例：https://jsfiddle.net/4Lkuwcga/