在我的网站上实施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 Uncaught TypeError:无法读取undefined的属性'match'
当我在javascript中遵循代码路径时,我会找到youtube源代码.由于我现在不想用这个和图片来实现视频,我取消注释视频内容并获得新的错误!:
lightgallery.js:1271 Uncaught SyntaxError:Unexpected token)lg-thumbnail.min.js:4 Uncaught TypeError:无法读取undefined(匿名函数)的属性'modules'@ lg-thumbnail.min.js:4(匿名函数)@ lg-thumbnail.min.js:4 lg-fullscreen.min.js:4未捕获TypeError:无法读取undefined(匿名函数)的属性'modules'@ 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,但是在过去的两天里,这是一场噩梦,试图让它发挥作用,任何帮助都将非常感激!
Clr*_*Clr 11
您正在使用错误的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>
使用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'
});
| 归档时间： |
|
| 查看次数： |
12939 次 |
| 最近记录： |