2015-11-01 24 views
3

在我的網站上執行lightgallery時出現問題。我搜索了堆棧溢出並閱讀了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: Cannot read property 'match' of undefined

當我跟隨的代碼路徑在JavaScript我在YouTube源 東西。因爲我不是想實現這個視頻,只是 圖片現在,我去掉了視頻的東西,並獲得新的錯誤!:

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但它在一個噩夢過去2天試圖讓它工作,任何幫助將不勝感激!

回答

9

您正在使用錯誤的html標記。您必須遵循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' 
}); 
+1

工作正常!非常感謝。與方法2一起工作,它的工作很好。沒有意識到我需要給我的a標籤上一個類並將它們指定爲選擇器 – JonnyBSeagull

0

我想通了,我的問題與此錯誤。由於我的JS技巧是廢話,我利用PHP將AJAX響應放入div中。作爲ajax.done()的AJAX目標的div不是我的LightGallery目標的div。所以,我告訴LightGallery綁定到一個包含在另一個div中的div。一旦我清理了我的選擇器,它就起作用了。