在我的网站上实现 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>
我在 javascript 控制台中收到此错误:
lightgallery.js:401 Uncaught TypeError: Cannot read property 'match' of undefined
当我按照 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 Uncaught TypeError: Cannot read property 'modules' of undefined(anonymous function) @ lg-fullscreen.min.js:4(anonymous function) @ lg-fullscreen.min.js:4 portfolio.html:124 Uncaught TypeError: $(...).lightGallery is not a function(anonymous function) @ portfolio.html:124j @ jquery.js:3099k.fireWith @ jquery.js:3211n.extend.ready @ jquery.js:3417I @ jquery.js:3433
我真的很想使用 lightgallery，但在过去的 2 天里，试图让它工作一直是一场噩梦，我们将不胜感激任何帮助!
最佳答案
您使用了错误的 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'
});
关于html - Lightgallery 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33459862/