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/