title: Lightgallery not working
body: <p>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:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html class="no-js" lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;W3 Alchemy | My Portfolio of Work&lt;/title&gt;
      &lt;link href="stylesheets/normalize.min.css" rel="stylesheet" media="screen"&gt;
      &lt;link rel="stylesheet" href="stylesheets/app.css" /&gt;
       &lt;link type="text/css" rel="stylesheet" href="stylesheets/lightGallery.css" /&gt; 
      &lt;script src="bower_components/modernizr/modernizr.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="contain-to-grid header-section"&gt;
        &lt;nav class="top-bar important-class" data-topbar&gt;
          &lt;ul class="title-area"&gt;
            &lt;li class="name"&gt;
              &lt;a href="http://www.w3alchemy.com"&gt;&lt;img src="img/W3HeadLogo1.png" alt="" id="logo-image"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="toggle-topbar menu-icon"&gt;&lt;a href="#"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;section class="top-bar-section"&gt;
            &lt;ul class="right"&gt;
              &lt;li class="active"&gt;&lt;a href="portfolio.html"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/section&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
      &lt;div class="header-fill"&gt;&lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="large-12 columns"&gt;
          &lt;ul class="small-block-grid-2 medium-block-grid-3" id="lightgallery"&gt;
            &lt;li data-src="img/alchemy_icon1.jpg"&gt;
              &lt;a href&gt;&lt;img src="img/alchemy_icon1_th.jpg"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="img/chandra1.jpg"&gt;&lt;img src="img/chandra1-th.jpg"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="img/Fish.jpg"&gt;&lt;img src="img/Fish-th.jpg"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="img/GFD 3D Text1.jpg"&gt;&lt;img src="img/GFD-3D-Text1-th.jpg"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="img/gorilla.jpg"&gt;&lt;img src="img/gorilla-th.jpg"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="img/JonnySeagull1.jpg"&gt;&lt;img src="img/JonnySeagull1-th.jpg"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="img/n logo1.jpg"&gt;&lt;img src="img/n-logo1-th.jpg"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="img/evolve1.jpg"&gt;&lt;img src="img/evolve1-th.jpg"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="img/jontoon.jpg"&gt;&lt;img src="img/jontoon-th.jpg"&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="img/W3Logo.jpg"&gt;&lt;img src="img/W3Logo-th.jpg"&gt;&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
  
  
  
  
  
  
  
  
   &lt;div class="alchemy-separator"&gt; 
  &lt;/div&gt;
  
   &lt;footer class="alchemy-footer-bottom"&gt;
    &lt;div class="row"&gt;
      &lt;div class="medium-4 medium-4 push-8 columns"&gt;
        &lt;ul class="home-social"&gt;
          &lt;li&gt;
            &lt;a href="http://twitter.com/gullwebd" class="fc-webicon twitter"&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="http://facebook.com/jonnybseagull" class="fc-webicon facebook"&gt;&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="medium-8 medium-8 pull-4 columns"&gt;
        &lt;a href="http://www.w3alchemy.com" class="alchemy-logosmall"&gt;&lt;/a&gt;
        &lt;ul class="alchemy-links inline-list"&gt;
           &lt;li&gt;
            &lt;a href="portfolio.html"&gt;Portfolio&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt; 
            &lt;a href="about.html"&gt;About&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="contact.html"&gt;Contact&lt;/a&gt;
          &lt;/li&gt;
          &lt;/ul&gt;
          &lt;p class="copyright"&gt;© 2015 W3 Alchemy, Jon Hernandez&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/footer&gt;
  
  
  &lt;script src="bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/fastclick/lib/fastclick.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/foundation/js/foundation.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;!-- For Sticky Header --&gt;
      &lt;script src="js/init.js"&gt;&lt;/script&gt;
              &lt;script&gt;$(document).foundation();&lt;/script&gt;
  
      &lt;!--*lightgallery java*--&gt;
      &lt;script type="text/javascript"&gt;
  $(document).ready(function($) {
      $("#lightgallery").lightGallery(); 
  });
  &lt;/script&gt;
      &lt;script src="js/lightgallery.js"&gt;&lt;/script&gt;
  &lt;!-- A jQuery plugin that adds cross-browser mouse wheel support. (Optional)          --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-                             mousewheel/3.1.13/jquery.mousewheel.min.js"&gt;&lt;/script&gt;
  &lt;!-- lightgallery plugins --&gt;
  &lt;script src="js/lg-thumbnail.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/lg-fullscreen.min.js"&gt;&lt;/script&gt;
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm getting this error in the javascript console:</p>
  
  <blockquote>
    <p>lightgallery.js:401 Uncaught TypeError: Cannot read property 'match' of undefined</p>
  </blockquote>
  
  <p>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!:</p>
  
  <blockquote>
    <p>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</p>
  </blockquote>
  
  <p>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!</p>