Question

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

我尝试更换静态lightGallery JS for CDNJS版本，我尝试在JS和jQuery中调用该函数，我甚至尝试在页眉和页脚中调用lightGallery JS但是我＆＃ 39;我仍然遇到这个问题。

我已经尝试过搜索，但无法找到任何与我相关且有效的答案的问题。

我过去曾经有这个插件，但它似乎已经打破了周末。我认为它可能是一个WordPress更新，它已经破坏了它，但我无法回滚检查！

下面的代码示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

<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/

lightGallery未加载图片

1 个答案: