「Gridder Ajax」插件問題

我想將Gridder Ajax jQuery插件添加到我的投資組合站點以展示我的工作。我遵循Github站點上的自述文件（https://github.com/oriongunning/gridder-ajax）並準確複製了代碼。我也下載了插件文件，並將插件的JS腳本和CSS鏈接指向了我的html文檔頭部的正確目錄路徑，如下面的代碼所示。我已經嘗試將JQuery代碼從頭部移動到文檔中的正文的底部，但那不起作用。我還創建了一個Jquery alert（）以確保JQuery實際上正在運行，並且它工作得很好。看起來JQuery代碼不工作，但CSS是。我之所以這麼說，是因爲如果我在註釋中插入CSS插件標記，那麼在圖像旁邊會顯示一個無序列表項。當我取消註釋代碼時，子彈消失。所以我想一些樣式正在應用。我想我沒有正確調用插件的JS文件，因爲我期待一個圖像呈現，我可以點擊，然後它應該擴展與描述和鏈接。「Gridder Ajax」插件問題

這裏是鏈接到我的編輯：https://ide.c9.io/dfmmalaw/scrollmagic-parallax

這裏是鏈接到該網站：https://scrollmagic-parallax-dfmmalaw.c9users.io

這裏是鏈接到文件：https://preview.c9users.io/dfmmalaw/scrollmagic-parallax

我還創建了這個的jsfiddle顯示你如何看待我的代碼以及實際渲染的內容。 https://jsfiddle.net/dfmmalaw/ossjtn33/很明顯，JSfiddle不能使用css和js文件，因爲它們不是由插件作者遠程託管的，但您至少可以瞭解我的代碼是如何構建的。有人能告訴我爲什麼這不起作用嗎？

代碼頭：

<link href="css/gridder-ajax.css" rel="stylesheet"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
<script src="js/gridder-ajax.js"></script> 

<script> 
    jQuery(document).ready(function ($) { 

     // Call Gridder Ajax with 
     // default options 

     $('.gridder-list').GridderAjax({ 
      scrollOffset: 0, 
      rootUrl: "/", 
      animationSpeed: 600, 
      animationEasing: "easeInOutExpo" 
     }); 
    }); 
</script>

代碼中體：

<div class="gridder-list"> 
    <li class="item item_1"> 
    <a href="item_4" title="Item 4" class="link"> 
     <img src="http://lorempixel.com/300/200/food/?date=6"> 
     <span class="title">Item 4</span> 
     <span class="description">A small Description</span> 
    </a> 
    <span class="selectedBox"></span> 
    </li> 
</div>

來源

2016-05-16 Dean Friedland