Lightgallery不起作用 [英] Lightgallery not working
问题描述
在我的网站上实施lightgallery时遇到问题.我已经搜索了堆栈溢出并阅读了lightgallery页面上的文档，却无法找出问题所在！这是我的网站的代码:
having a problem implementing lightgallery with my website. I've searched stack overflow and read the docs on the lightgallery page and can't figure out what the problem is! Here is the code for my site:
<!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控制台中遇到此错误:
I'm getting this error in the javascript console:
lightgallery.js:401未捕获的TypeError:无法读取未定义的属性"match"
lightgallery.js:401 Uncaught TypeError: Cannot read property 'match' of undefined
当我遵循javascript中的代码路径时，我会找到youtube源 东西.由于我不打算以此来实施视频 图片，现在我不评论视频内容并出现新错误！:
When I follow the code path in javascript I find the youtube source stuff. Since I'm not trying to implement videos with this and just pictures for now, I uncomment the video stuff and get new errors!:
lightgallery.js:1271未捕获的SyntaxError:意外令牌) lg-thumbnail.min.js:4未捕获的TypeError:无法读取未定义(匿名函数)的属性'modules'@ lg-thumbnail.min.js:4(匿名函数)@ lg-thumbnail.min.js:4 lg-fullscreen.min.js:4未捕获的TypeError:无法读取未定义(匿名函数)的属性'modules'@ lg-fullscreen.min.js:4(匿名函数)@ lg-fullscreen.min.js:4 Portfolio.html:124未被捕获的TypeError:$(...).lightGallery不是函数(匿名函数)@ Portfolio.html:124j @ jquery.js:3099k.fireWith @ jquery.js:3211n.extend.ready @ jquery.js:3417I @ jquery.js:3433
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，但是在过去两天里努力工作一直是噩梦，任何帮助将不胜感激！
I'd really like to use lightgallery but it's been a nightmare over the past 2 days trying to get it to work, any help would be greatly appreciated!
推荐答案
您使用了错误的html标记.您必须遵循 docs 中指定的以下任何标记.
You are using wrong html markup. You have to follow any of the following markup specified in the 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'
});
这篇关于Lightgallery不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
