jquery - Foundation 3 を初期化して Orbit を使用する方法は?

Question

この質問で見つけたスクリプトを使用して Foundation 3 で Orbit を実行しようとしていますが、正しく初期化できません。このスクリプトをフッターに追加し、Foundation.min.js をヘッダーに追加しました。コンソールの 3 行目に no method 'foundation' エラーが表示され、動作しません。

Answer 1

リンク先の SO スレッドのスクリプトは、Foundation 4 を使用しているため機能しません。Orbit は Foundation 3 (F3) で異なる方法で初期化されます。id を持つ要素があるとしますorbitX。次のように初期化します。

$("#orbitX").orbit();

あなたが尋ねた他のSOの質問で

追加の設定をどこに追加しますか?

次のように軌道要素を初期化するときにそれを行います。

$("#orbitX").orbit({
    bullets: false; // to hide the bullets
});

ここにオプションの完全なセットがあります

$('#orbitX').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
  resetTimerOnClick: false,           // true resets the timer instead of pausing slideshow progress
  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
  fluid: true                         // or set a aspect ratio for content slides (ex: '4x3')
});