Lightgallery not working

问题

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!

回答1:

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'
});

回答2:

I figured out my problem with this error. Since my JS skills are crap, I'm leveraging PHP to put AJAX responses into a div. The div that's the AJAX target for ajax.done() wasn't the div that was my LightGallery target. So, I was telling LightGallery to bind to a div that contained inside it another div. Once I cleared up my selectors, it worked.

来源：https://stackoverflow.com/questions/33459862/lightgallery-not-working

标签

html

lightgallery