Menu
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>
I'm getting this error in the javascript console:
lightgallery.js:401 Uncaught TypeError: Cannot read property 'match' of undefined
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 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
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!
854
You are using wrong html markup. You have to follow any of the following markup specified in the docs.
Method: 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();
Method: 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'
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
