2014-03-07 57 views
0

我一直在繞軌道運行(zurb-foundation)。我想自定義幻燈片和我得到一個惱人的錯誤: 「遺漏的類型錯誤:對象的翻譯:有沒有方法‘軌道’」 看起來foundation.orbit.js腳本不是definet。另一個奇怪的是在這個腳本函數開頭;(函數($,窗口,文件,未定義)是正常的「;」 下面是代碼:Uncaught TypeError:Object [object Object] has no method'orbit'

<head> 
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width"> 
    <title> - Welcome to Foundation</title> 
    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon"> 
    <link href="/Content/landing-page.css" rel="stylesheet"> 
    <script src="/Scripts/jquery-1.8.2.js"></script> 
    <script src="/Scripts/jquery.cookie.js"></script> 

    <script src="/Scripts/jquery-ui-1.8.24.js"></script> 

    <link href="/Content/foundation/foundation.css" rel="stylesheet"> 
    <link href="/Content/foundation/foundation.mvc.css" rel="stylesheet"> 
    <link href="/Content/foundation/app.css" rel="stylesheet"> 
    <script src="/Scripts/modernizr-2.6.2.js"></script> 
    <meta class="foundation-data-attribute-namespace"> 
    <meta class="foundation-mq-xxlarge"> 
    <meta class="foundation-mq-xlarge"> 
    <meta class="foundation-mq-large"> 
    <meta class="foundation-mq-medium"> 
    <meta class="foundation-mq-small"> 
</head> 
<body> 
    <div class="row"> 
    <div class="large-1 columns"> 
    </div> 
    <div class="large-10 columns large-centered"> 
     <section class="full-grid"> 
      <div id="travelled-places"> 
       <img class="border" src="/Content/images/landing/canada-national-park.jpg" alt="Canada National Park" title="Canada National Park" data-thumb="~/Content/images/landing/canada-national-park.jpg" style="display: block; z-index: 1;">      
       <img class="border" src="/Content/images/landing/china-gardens.jpg" alt="China Gardens" title="China Gardens" data-thumb="~/Content/images/landing/china-gardens.jpg" style="display: none; z-index: 1;"> 
       <img class="border" src="/Content/images/landing/grand-canyon.jpg" alt="Grand Canyon" title="Grand Canyon" data-thumb="~/Content/images/landing/grand-canyon.jpg" style="display: none; z-index: 1;"> 
       <img class="border" src="/Content/images/landing/hawaii.jpg" alt="Hawaii" title="Hawaii" data-thumb="~/Content/images/landing/hawaii.jpg" style="display: none; z-index: 1;"> 
      </div>     
      <div class="cn-bar"> 
       <div class="cn-nav"> 
        <a href="#" class="cn-nav-next"> 
         <span>Previous</span> 
         <div style="background-image:url(/Content/images/landing/china-gardens.jpg);"></div> 
        </a> 
        <a href="#" class="cn-nav-next"> 
         <span>Next</span> 
         <div style="background-image:url(/Content/images/landing/hawaii.jpg);"></div> 
        </a> 
       </div>      
      </div> 
     </section> 
    </div> 
    <div class="large-1 columns"> 
    </div> 
    <script src="/Scripts/fastclick.js"></script> 
<script src="/Scripts/placeholder.js"></script> 
    <script src="/Scripts/foundation/foundation.js"></script> 
<script src="/Scripts/foundation/foundation.abide.js"></script> 
<script src="/Scripts/foundation/foundation.accordion.js"></script> 
<script src="/Scripts/foundation/foundation.alert.js"></script> 
<script src="/Scripts/foundation/foundation.clearing.js"></script> 
<script src="/Scripts/foundation/foundation.dropdown.js"></script> 
<script src="/Scripts/foundation/foundation.equalizer.js"></script> 
<script src="/Scripts/foundation/foundation.interchange.js"></script> 
<script src="/Scripts/foundation/foundation.joyride.js"></script> 
<script src="/Scripts/foundation/foundation.magellan.js"></script> 
<script src="/Scripts/foundation/foundation.offcanvas.js"></script> 
<script src="/Scripts/foundation/foundation.orbit.js"></script> 
<script src="/Scripts/foundation/foundation.reveal.js"></script> 
<script src="/Scripts/foundation/foundation.slider.js"></script> 
<script src="/Scripts/foundation/foundation.tab.js"></script> 
<script src="/Scripts/foundation/foundation.tooltip.js"></script> 
<script src="/Scripts/foundation/foundation.topbar.js"></script> 
    <script> 
    //$(document).foundation(); 
    jQuery(document).ready(function ($) { 
     $('#travelled-places').orbit({ 
      animation: 'fade',     // fade, horizontal-slide, vertical-slide, horizontal-push 
      animationSpeed: 800,    // how fast animtions are 
      timer: true,    // true or false to have the timer 
      advanceSpeed: 4000,   // if timer is enabled, time between transitions 
      pauseOnHover: false,   // if you hover pauses the slider 
      startClockOnMouseOut: false,  // if clock should start on MouseOut 
      startClockOnMouseOutAfter: 1000,  // how long after MouseOut should the timer start again 
      directionalNav: true,  // manual advancing directional navs 
      captions: true,    // do you want captions? 
      captionAnimation: 'fade',  // fade, slideOpen, none 
      captionAnimationSpeed: 800,  // if so how quickly should they animate in 
      bullets: false,   // true or false to activate the bullet navigation 
      bulletThumbs: false,   // thumbnails for the bullets 
      bulletThumbLocation: '',   // location from this file where thumbs will be 
      afterSlideChange: function() { } // empty function 
     }); 
    }); 
</script>  

任何想法? ?

在此先感謝

+0

你已經錯過了JS文件:看到http://foundation.zurb.com/docs/javascript.html – DAC84

+0

我讓他們在我的代碼,但我忘了他們在這裏添加在後。我剛纔更新了它。 – Bonomi

+0

閱讀我發佈的鏈接,因爲你包括錯誤的東西,而不是初始化基礎JS。 – DAC84

回答

0

有在你的代碼的幾個問題:

  1. 在使用基礎插件之前,您需要取消註釋$(document).foundation();以初始化基礎插件。
  2. 你沒有正確調用orbit,它呼籲document,然後通過添加data-orbit屬性您<div id="travelled-places">元素,像這樣:

    $(document).foundation({ 
        orbit: { 
         ... // your options 
        } 
    }); 
    

有關進一步參考Foundations Orbit文檔。

相關問題