文章/答案/技术大牛

发布

问光廊不工作
EN

Stack Overflow用户

提问于 2015-11-01 06:37:28

回答 2查看 20.8K关注 0票数 6

有一个问题，实现轻量级画廊我的网站。我已经搜索了堆栈溢出，并读取了光明画廊页面上的文档，但我不知道问题是什么！以下是我的网站代码：

<!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未定义TypeError:无法读取未定义属性的“匹配”

当我遵循javascript中的代码路径时，我会找到youtube的源代码。因为我现在不想用这个和图片来实现视频，所以我取消了视频评论，得到了新的错误！

lightgallery.js:1271 Uncaught :意外令牌)lg-umbnail.min.js:4 Uncaught :无法读取未定义(匿名函数)@lg-umbnail.min.js:4(匿名函数)@lg-umbnail.min.js:4 lg-全屏.min.js:4 Uncaught :无法读取未定义(匿名函数)@lg-全屏.min.js:4(匿名函数)的属性‘模块’portfolio.html:124 Uncaught：$(.).lightGallery不是一个函数(匿名函数)@ portfolio.html:124j @ jquery.js:3099k.fireWith @ jquery.js:3211n.extend.ready @ jquery.js:3417I @ jquery.js:3433

我真的很想使用轻型画廊，但在过去的两天里，它一直是一个噩梦，试图让它工作，任何帮助都将是非常感谢的！

html

lightgallery

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-11-01 07:54:42

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

方法: 1)

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

<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'
});

票数 16

Stack Overflow用户

发布于 2016-09-08 00:21:39

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33459862

复制

相似问题

问光廊不工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问光廊不工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问光廊不工作
EN