Question

我跟着blueimp的官方setup guide。

我下載了最新版本blueImp的

首先我包括CSS和JS（2.25.0）：

<!-- Blueimp Gallery --> 
<link rel="stylesheet" href="../public/Gallery-2.25.0/css/blueimp-gallery.min.css"> 

<script src='../public/Gallery-2.25.0/js/blueimp-gallery.min.js'></script> 

，我準備傳送帶：

<div id="blueimp-gallery-carousel" class="image blueimp-gallery blueimp-gallery-controls blueimp-gallery-carousel"> 
    <div class="slides"></div> 
    <h3 class="title"></h3> 
    <a class="prev">‹</a> 
    <a class="next">›</a> 
    <a class="play-pause"></a> 
    <ol class="indicator"></ol> 
</div> 

現在我準備的圖片：

<div id="links"> 

    <a href="../pcs/pic1.png"></a> 
    <a href="../pcs/pic2.png"></a> 
    <a href="../pcs/pic3.png"></a> 

</div> 

最後我包括腳本：

<script src="../js/blueImp.js"></script> 

...具有以下內容：

<script> 
blueimp.Gallery(
    document.getElementById('links').getElementsByTagName('a'), 
    { 
     container: '#blueimp-gallery-carousel', 
     carousel: true 
    } 
); 
</script> 

結果：

正如你可以看到我跟着安裝指南，但是我得到TypeError：this.slides [t]未定義點擊一個a rrow。我也用2.23.0試過了，同樣的錯誤。

我在做什麼錯？

---

測試瀏覽器：

的Mozilla Firefox 52.0.2（64位），Mozilla的爲Ubuntu

的Mozilla Firefox 52.0.1（32位），視窗7

Answer 1

我用Jquerys底部包裝腳本解決了它$(document).ready(function(){ ... })

 $(document).ready(function() { 

      blueimp.Gallery(
       document.getElementById('links').getElementsByTagName('a'), 
       { 
        container: '#blueimp-gallery-carousel', 
        carousel: true 
       } 
      ); 
     }); 

我不明白爲什麼這是必要的，因爲腳本被包含在最後一個位置，就在結束標籤之前。任何解釋？