6

在我的网站上实施 lightgallery 时遇到问题。我搜索了堆栈溢出并阅读了 lightgallery 页面上的文档，但无法弄清楚问题所在！这是我网站的代码：

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>W3 Alchemy | My Portfolio of Work</title>
    <link href="stylesheets/normalize.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="stylesheets/app.css" />
     <link type="text/css" rel="stylesheet" href="stylesheets/lightGallery.css" /> 
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>
      <div class="contain-to-grid header-section">
      <nav class="top-bar important-class" data-topbar>
        <ul class="title-area">
          <li class="name">
            <a href="http://www.w3alchemy.com"><img src="img/W3HeadLogo1.png" alt="" id="logo-image"></a>
          </li>
          <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
        </ul>
        <section class="top-bar-section">
          <ul class="right">
            <li class="active"><a href="portfolio.html">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </section>
      </nav>
    </div>
    <div class="header-fill"></div>

<div class="row">
    <div class="large-12 columns">
        <ul class="small-block-grid-2 medium-block-grid-3" id="lightgallery">
          <li data-src="img/alchemy_icon1.jpg">
            <a href><img src="img/alchemy_icon1_th.jpg"></a>
          </li>
          <li>
            <a href="img/chandra1.jpg"><img src="img/chandra1-th.jpg"></a>
          </li>
          <li>
            <a href="img/Fish.jpg"><img src="img/Fish-th.jpg"></a>
          </li>
          <li>
            <a href="img/GFD 3D Text1.jpg"><img src="img/GFD-3D-Text1-th.jpg"></a>
          </li>
          <li>
            <a href="img/gorilla.jpg"><img src="img/gorilla-th.jpg"></a>
          </li>
          <li>
            <a href="img/JonnySeagull1.jpg"><img src="img/JonnySeagull1-th.jpg"></a>
          </li>
          <li>
            <a href="img/n logo1.jpg"><img src="img/n-logo1-th.jpg"></a>
          </li>
          <li>
            <a href="img/evolve1.jpg"><img src="img/evolve1-th.jpg"></a>
          </li>
          <li>
            <a href="img/jontoon.jpg"><img src="img/jontoon-th.jpg"></a>
          </li>
          <li>
            <a href="img/W3Logo.jpg"><img src="img/W3Logo-th.jpg"></a>
          </li>
        </ul>
    </div>
  </div>











 <div class="alchemy-separator"> 
</div>

 <footer class="alchemy-footer-bottom">
  <div class="row">
    <div class="medium-4 medium-4 push-8 columns">
      <ul class="home-social">
        <li>
          <a href="http://twitter.com/gullwebd" class="fc-webicon twitter"></a>
        </li>
        <li>
          <a href="http://facebook.com/jonnybseagull" class="fc-webicon facebook"></a>
        </li>
      </ul>
    </div>
    <div class="medium-8 medium-8 pull-4 columns">
      <a href="http://www.w3alchemy.com" class="alchemy-logosmall"></a>
      <ul class="alchemy-links inline-list">
         <li>
          <a href="portfolio.html">Portfolio</a>
        </li>
        <li> 
          <a href="about.html">About</a>
        </li>
        <li>
          <a href="contact.html">Contact</a>
        </li>
        </ul>
        <p class="copyright">© 2015 W3 Alchemy, Jon Hernandez</p>
    </div>
  </div>
</footer>


<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>
<!-- For Sticky Header -->
    <script src="js/init.js"></script>
            <script>$(document).foundation();</script>

    <!--*lightgallery java*-->
    <script type="text/javascript">
$(document).ready(function($) {
    $("#lightgallery").lightGallery(); 
});
</script>
    <script src="js/lightgallery.js"></script>
<!-- A jQuery plugin that adds cross-browser mouse wheel support. (Optional)          -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-                             mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<!-- lightgallery plugins -->
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>




</body>
</html>

我在 javascript 控制台中收到此错误：

lightgallery.js：401 未捕获类型错误：无法读取未定义的属性“匹配”

当我遵循 javascript 中的代码路径时，我会找到 youtube 源代码。由于我暂时不尝试使用此视频和图片来实现视频，因此我取消注释视频内容并收到新错误！：

lightgallery.js:1271 Uncaught SyntaxError: Unexpected token) lg-thumbnail.min.js:4 Uncaught TypeError: Cannot read property 'modules' of undefined(anonymous function) @ lg-thumbnail.min.js:4(anonymous function) @ lg-thumbnail.min.js:4 lg-fullscreen.min.js:4 未捕获类型错误：无法读取未定义的属性“模块”（匿名函数）@ lg-fullscreen.min.js:4（匿名函数）@ lg- fullscreen.min.js:4 portfolio.html:124 Uncaught TypeError: $(...).lightGallery 不是函数（匿名函数）@portfolio.html:124j@jquery.js:3099k.fireWith@jquery.js: 3211n.extend.ready@jquery.js:3417I@jquery.js:3433

我真的很想使用 lightgallery，但在过去 2 天里试图让它工作一直是一场噩梦，任何帮助将不胜感激！

4

2 回答 2

16

您使用了错误的 html 标记。您必须遵循docs中指定的以下任何标记。

方法：1）

html

<div class="row">
  <div class="large-12 columns">
    <ul class="small-block-grid-2 medium-block-grid-3" id="lightgallery">
      <li data-src="img/alchemy_icon1.jpg"> <a href><img src="img/alchemy_icon1_th.jpg"></a>
      </li>
      <li data-src="img/chandra1.jpg"> <a href><img src="img/chandra1-th.jpg"></a>
      </li>
      <li data-src="img/Fish.jpg"> <a href><img src="img/Fish-th.jpg"></a>
      </li>
    </ul>
  </div>
</div>

Javascript

$("#lightgallery").lightGallery();

方法：2）

html

<div class="row">
  <div class="large-12 columns">
    <ul class="small-block-grid-2 medium-block-grid-3" id="lightgallery">
      <li> <a class="item" href="img/alchemy_icon1.jpg"><img src="img/alchemy_icon1_th.jpg"></a>
      </li>
      <li> <a class="item" href="img/chandra1.jpg"><img src="img/chandra1-th.jpg"></a>
      </li>
      <li> <a class="item" href="img/Fish.jpg"><img src="img/Fish-th.jpg"></a>
      </li>
    </ul>
  </div>
</div>

Javascript

$("#lightgallery").lightGallery({
    selector: '.item'
});
于 2015-11-01T07:54:42.450 回答
0

我发现了这个错误的问题。由于我的 JS 技能很烂，我正在利用 PHP 将 AJAX 响应放入一个 div 中。作为 ajax.done() 的 AJAX 目标的 div 不是我的 LightGallery 目标的 div。所以，我告诉 LightGallery 绑定到包含另一个 div 的 div。一旦我清理了我的选择器，它就起作用了。

于 2016-09-08T00:21:39.453 回答