Html Lightgallery不工作_Html_Lightgallery

Html Lightgallery不工作

html

Html Lightgallery不工作,html,lightgallery,Html,Lightgallery,在我的网站上实现lightgallery时遇到问题。我已经搜索了stack overflow并阅读了lightgallery页面上的文档，但无法找出问题所在！以下是我的网站的代码： <!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device

在我的网站上实现lightgallery时遇到问题。我已经搜索了stack overflow并阅读了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>


W3炼金术|我的作品集














































©2015 W3 Alchemy，Jon Hernandez
$（document.foundation（）；
$（文档）.ready（函数（$）{
$（“#lightgallery”）.lightgallery（）；
});

我在javascript控制台中遇到以下错误：

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

当我在javascript中遵循代码路径时，我找到了youtube源代码东西因为我不想用这个来实现视频，只是现在的图片，我取消了对视频内容的注释，并出现了新的错误！：

lightgallery.js:1271未捕获的语法错误：意外标记） lg thumbnail.min.js:4未捕获类型错误：无法读取未定义（匿名函数）的属性“modules”@ lg thumbnail.min.js:4（匿名函数）@lg thumbnail.min.js:4 lg fullscreen.min.js:4未捕获类型错误：无法读取未定义（匿名函数）的属性“modules”@ lg fullscreen.min.js:4（匿名函数）@lg fullscreen.min.js:4 portfolio.html:124未捕获类型错误：$（…）。lightGallery不是函数（匿名函数）@portfolio.html:124j@ jquery.js:3099k.fireWith@jquery.js:3211n.extend.ready@ jquery.js:3417I@jquery.js:3433

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

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

方法：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>

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

方法：2）

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>

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

我用这个错误解决了我的问题。由于我的JS技能是垃圾，我正在利用PHP将AJAX响应放入一个div中。AJAX.done（）的AJAX目标div不是我的LightGallery目标div。所以，我告诉LightGallery绑定到一个包含另一个div的div。一旦我清除了选择器，它就成功了。

成功了！非常感谢。使用方法2，效果很好。我没有意识到我需要给我的a标签指定一个类，并将它们指定为选择器